<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>JavaScript-cnblog | 凌歆的博客</title>
    <meta name="generator" content="VuePress 1.9.5">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="7F55weZDDc">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.d9c8cf8c.css" as="style"><link rel="preload" href="/assets/js/app.57550e13.js" as="script"><link rel="preload" href="/assets/js/2.f014c35f.js" as="script"><link rel="preload" href="/assets/js/140.a7c013ae.js" as="script"><link rel="prefetch" href="/assets/js/10.03a98811.js"><link rel="prefetch" href="/assets/js/100.145e708e.js"><link rel="prefetch" href="/assets/js/101.098ca5c8.js"><link rel="prefetch" href="/assets/js/102.4d45c69a.js"><link rel="prefetch" href="/assets/js/103.499de505.js"><link rel="prefetch" href="/assets/js/104.c2c1b9b6.js"><link rel="prefetch" href="/assets/js/105.4e9b0663.js"><link rel="prefetch" href="/assets/js/106.9bb8cf6f.js"><link rel="prefetch" href="/assets/js/107.a81b32d7.js"><link rel="prefetch" href="/assets/js/108.81511e67.js"><link rel="prefetch" href="/assets/js/109.6a6741bf.js"><link rel="prefetch" href="/assets/js/11.e8729182.js"><link rel="prefetch" href="/assets/js/110.de657fe7.js"><link rel="prefetch" href="/assets/js/111.b092af6d.js"><link rel="prefetch" href="/assets/js/112.2dca5709.js"><link rel="prefetch" href="/assets/js/113.dbed1fac.js"><link rel="prefetch" href="/assets/js/114.e95a0131.js"><link rel="prefetch" href="/assets/js/115.2e3e8285.js"><link rel="prefetch" href="/assets/js/116.e64f7fec.js"><link rel="prefetch" href="/assets/js/117.583552c9.js"><link rel="prefetch" href="/assets/js/118.aa5d18f0.js"><link rel="prefetch" href="/assets/js/119.0c7b52d7.js"><link rel="prefetch" href="/assets/js/12.d63acec2.js"><link rel="prefetch" href="/assets/js/120.13f86281.js"><link rel="prefetch" href="/assets/js/121.e2b5b7f9.js"><link rel="prefetch" href="/assets/js/122.5252216a.js"><link rel="prefetch" href="/assets/js/123.8b8a3503.js"><link rel="prefetch" href="/assets/js/124.60df855c.js"><link rel="prefetch" href="/assets/js/125.f073ab1c.js"><link rel="prefetch" href="/assets/js/126.7b73de6a.js"><link rel="prefetch" href="/assets/js/127.4e25971c.js"><link rel="prefetch" href="/assets/js/128.0edf0e06.js"><link rel="prefetch" href="/assets/js/129.5cb5a70a.js"><link rel="prefetch" href="/assets/js/13.2259ef71.js"><link rel="prefetch" href="/assets/js/130.00247fda.js"><link rel="prefetch" href="/assets/js/131.d6fc003a.js"><link rel="prefetch" href="/assets/js/132.1a32b18f.js"><link rel="prefetch" href="/assets/js/133.e46c0193.js"><link rel="prefetch" href="/assets/js/134.a6ad681f.js"><link rel="prefetch" href="/assets/js/135.2fcbe137.js"><link rel="prefetch" href="/assets/js/136.f69bf451.js"><link rel="prefetch" href="/assets/js/137.b9ef2fcc.js"><link rel="prefetch" href="/assets/js/138.7fdd9feb.js"><link rel="prefetch" href="/assets/js/139.a3a37c91.js"><link rel="prefetch" href="/assets/js/14.0d6b23b9.js"><link rel="prefetch" href="/assets/js/141.956c36ce.js"><link rel="prefetch" href="/assets/js/142.5aacfe42.js"><link rel="prefetch" href="/assets/js/143.57d691ef.js"><link rel="prefetch" href="/assets/js/144.b1e5766e.js"><link rel="prefetch" href="/assets/js/145.463284b7.js"><link rel="prefetch" href="/assets/js/146.6cc6420c.js"><link rel="prefetch" href="/assets/js/147.5b78c5a2.js"><link rel="prefetch" href="/assets/js/148.8d1d7679.js"><link rel="prefetch" href="/assets/js/149.4e0eb213.js"><link rel="prefetch" href="/assets/js/15.f6fde69d.js"><link rel="prefetch" href="/assets/js/150.b183de37.js"><link rel="prefetch" href="/assets/js/151.729ae770.js"><link rel="prefetch" href="/assets/js/152.b1297018.js"><link rel="prefetch" href="/assets/js/153.bb991bca.js"><link rel="prefetch" href="/assets/js/154.6f2286aa.js"><link rel="prefetch" href="/assets/js/155.6a9c7e4d.js"><link rel="prefetch" href="/assets/js/156.f7bd535d.js"><link rel="prefetch" href="/assets/js/157.64c0065c.js"><link rel="prefetch" href="/assets/js/158.d31ae949.js"><link rel="prefetch" href="/assets/js/159.7daea8a7.js"><link rel="prefetch" href="/assets/js/16.7be21beb.js"><link rel="prefetch" href="/assets/js/160.33cc971a.js"><link rel="prefetch" href="/assets/js/161.1676442a.js"><link rel="prefetch" href="/assets/js/162.71378046.js"><link rel="prefetch" href="/assets/js/163.99e49959.js"><link rel="prefetch" href="/assets/js/164.306f07d2.js"><link rel="prefetch" href="/assets/js/165.170977c7.js"><link rel="prefetch" href="/assets/js/166.f8602525.js"><link rel="prefetch" href="/assets/js/167.eea5c001.js"><link rel="prefetch" href="/assets/js/168.0146a311.js"><link rel="prefetch" href="/assets/js/169.05f9c9d9.js"><link rel="prefetch" href="/assets/js/17.2543f471.js"><link rel="prefetch" href="/assets/js/170.25d602b2.js"><link rel="prefetch" href="/assets/js/171.1ada26a6.js"><link rel="prefetch" href="/assets/js/172.2a0f697c.js"><link rel="prefetch" href="/assets/js/173.230d8ca8.js"><link rel="prefetch" href="/assets/js/174.e3758a2b.js"><link rel="prefetch" href="/assets/js/175.0f19f8ea.js"><link rel="prefetch" href="/assets/js/176.bf70d37d.js"><link rel="prefetch" href="/assets/js/177.4400f272.js"><link rel="prefetch" href="/assets/js/178.85af7b89.js"><link rel="prefetch" href="/assets/js/179.4cfaaaa2.js"><link rel="prefetch" href="/assets/js/18.394415f8.js"><link rel="prefetch" href="/assets/js/180.449c8409.js"><link rel="prefetch" href="/assets/js/181.73276924.js"><link rel="prefetch" href="/assets/js/182.5fab25cc.js"><link rel="prefetch" href="/assets/js/183.ecd4934d.js"><link rel="prefetch" href="/assets/js/184.246092cf.js"><link rel="prefetch" href="/assets/js/185.c671cd86.js"><link rel="prefetch" href="/assets/js/186.49bd1963.js"><link rel="prefetch" href="/assets/js/187.1fb32764.js"><link rel="prefetch" href="/assets/js/188.7c6885e9.js"><link rel="prefetch" href="/assets/js/189.a8701dec.js"><link rel="prefetch" href="/assets/js/19.ca7db8ea.js"><link rel="prefetch" href="/assets/js/190.ae3d3bde.js"><link rel="prefetch" href="/assets/js/191.ad7cd44e.js"><link rel="prefetch" href="/assets/js/192.bc443842.js"><link rel="prefetch" href="/assets/js/193.e4755764.js"><link rel="prefetch" href="/assets/js/194.814112ce.js"><link rel="prefetch" href="/assets/js/195.1c0aaa80.js"><link rel="prefetch" href="/assets/js/196.a6bd7add.js"><link rel="prefetch" href="/assets/js/20.4e91cd31.js"><link rel="prefetch" href="/assets/js/21.f095e6e1.js"><link rel="prefetch" href="/assets/js/22.72f4b8ab.js"><link rel="prefetch" href="/assets/js/23.e94eb9d2.js"><link rel="prefetch" href="/assets/js/24.0eae7d6f.js"><link rel="prefetch" href="/assets/js/25.36157609.js"><link rel="prefetch" href="/assets/js/26.dc5b6cba.js"><link rel="prefetch" href="/assets/js/27.c19b7b63.js"><link rel="prefetch" href="/assets/js/28.3aceae59.js"><link rel="prefetch" href="/assets/js/29.536091b3.js"><link rel="prefetch" href="/assets/js/3.d11119c4.js"><link rel="prefetch" href="/assets/js/30.821a4a30.js"><link rel="prefetch" href="/assets/js/31.5238784c.js"><link rel="prefetch" href="/assets/js/32.10bc7179.js"><link rel="prefetch" href="/assets/js/33.c1ed69c9.js"><link rel="prefetch" href="/assets/js/34.8d384231.js"><link rel="prefetch" href="/assets/js/35.d8890e52.js"><link rel="prefetch" href="/assets/js/36.eca37ad5.js"><link rel="prefetch" href="/assets/js/37.802549e3.js"><link rel="prefetch" href="/assets/js/38.53841770.js"><link rel="prefetch" href="/assets/js/39.7ae44409.js"><link rel="prefetch" href="/assets/js/4.493b9bca.js"><link rel="prefetch" href="/assets/js/40.ce56364a.js"><link rel="prefetch" href="/assets/js/41.85f0114b.js"><link rel="prefetch" href="/assets/js/42.714da6e2.js"><link rel="prefetch" href="/assets/js/43.fee4437c.js"><link rel="prefetch" href="/assets/js/44.b039b68b.js"><link rel="prefetch" href="/assets/js/45.96a55605.js"><link rel="prefetch" href="/assets/js/46.956ffb03.js"><link rel="prefetch" href="/assets/js/47.147d9218.js"><link rel="prefetch" href="/assets/js/48.ff787b40.js"><link rel="prefetch" href="/assets/js/49.871eee87.js"><link rel="prefetch" href="/assets/js/5.e0ba07d7.js"><link rel="prefetch" href="/assets/js/50.99b7c29e.js"><link rel="prefetch" href="/assets/js/51.8ecbf4ba.js"><link rel="prefetch" href="/assets/js/52.53d91d7e.js"><link rel="prefetch" href="/assets/js/53.af8a0d2a.js"><link rel="prefetch" href="/assets/js/54.a2f848b5.js"><link rel="prefetch" href="/assets/js/55.267e9947.js"><link rel="prefetch" href="/assets/js/56.0b201c40.js"><link rel="prefetch" href="/assets/js/57.cbdfd6f7.js"><link rel="prefetch" href="/assets/js/58.636c0c3f.js"><link rel="prefetch" href="/assets/js/59.fc9216c4.js"><link rel="prefetch" href="/assets/js/6.b98373f2.js"><link rel="prefetch" href="/assets/js/60.34f16fc4.js"><link rel="prefetch" href="/assets/js/61.4d130bd8.js"><link rel="prefetch" href="/assets/js/62.927caa10.js"><link rel="prefetch" href="/assets/js/63.a451fee0.js"><link rel="prefetch" href="/assets/js/64.32a5d47b.js"><link rel="prefetch" href="/assets/js/65.bc099429.js"><link rel="prefetch" href="/assets/js/66.3953050d.js"><link rel="prefetch" href="/assets/js/67.e934823b.js"><link rel="prefetch" href="/assets/js/68.4bcb52b0.js"><link rel="prefetch" href="/assets/js/69.bede18c8.js"><link rel="prefetch" href="/assets/js/7.8de8df2d.js"><link rel="prefetch" href="/assets/js/70.fce1daac.js"><link rel="prefetch" href="/assets/js/71.ea0a8c5d.js"><link rel="prefetch" href="/assets/js/72.15382c9e.js"><link rel="prefetch" href="/assets/js/73.848364d3.js"><link rel="prefetch" href="/assets/js/74.5fd08a50.js"><link rel="prefetch" href="/assets/js/75.c937c70d.js"><link rel="prefetch" href="/assets/js/76.a0dacd5a.js"><link rel="prefetch" href="/assets/js/77.4019cc23.js"><link rel="prefetch" href="/assets/js/78.9676a9e1.js"><link rel="prefetch" href="/assets/js/79.e46e10d5.js"><link rel="prefetch" href="/assets/js/8.2098eb96.js"><link rel="prefetch" href="/assets/js/80.987e83cb.js"><link rel="prefetch" href="/assets/js/81.eb98ff36.js"><link rel="prefetch" href="/assets/js/82.623561a7.js"><link rel="prefetch" href="/assets/js/83.e256d909.js"><link rel="prefetch" href="/assets/js/84.7d06a550.js"><link rel="prefetch" href="/assets/js/85.b8d9879e.js"><link rel="prefetch" href="/assets/js/86.31c4581b.js"><link rel="prefetch" href="/assets/js/87.e06ee05e.js"><link rel="prefetch" href="/assets/js/88.81ef718d.js"><link rel="prefetch" href="/assets/js/89.ba237d2f.js"><link rel="prefetch" href="/assets/js/9.36092fd0.js"><link rel="prefetch" href="/assets/js/90.ad2c9d92.js"><link rel="prefetch" href="/assets/js/91.a661f52d.js"><link rel="prefetch" href="/assets/js/92.1c28035b.js"><link rel="prefetch" href="/assets/js/93.c8b8e3d6.js"><link rel="prefetch" href="/assets/js/94.b6bc4a44.js"><link rel="prefetch" href="/assets/js/95.92cea882.js"><link rel="prefetch" href="/assets/js/96.5373491b.js"><link rel="prefetch" href="/assets/js/97.bb39efc8.js"><link rel="prefetch" href="/assets/js/98.af7a030f.js"><link rel="prefetch" href="/assets/js/99.07dc87d8.js">
    <link rel="stylesheet" href="/assets/css/0.styles.d9c8cf8c.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="https://lingxin-tanhua.oss-cn-shanghai.aliyuncs.com/QQ%E6%88%AA%E5%9B%BE20220503092755.png" alt="凌歆的博客" class="logo"> <span class="site-name can-hide">凌歆的博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/html/" class="nav-link">HTML笔记</a></li><li class="dropdown-subitem"><a href="/note/js-low/" class="nav-link">JavaScript基础笔记</a></li><li class="dropdown-subitem"><a href="/note/js-high/" class="nav-link">JavaScript高阶笔记</a></li><li class="dropdown-subitem"><a href="/note/js-dom-bom/" class="nav-link">JavaScript DOM和BOM笔记</a></li><li class="dropdown-subitem"><a href="/note/jquery/" class="nav-link">jQuery笔记</a></li><li class="dropdown-subitem"><a href="/note/ajax/" class="nav-link">Ajax笔记</a></li><li class="dropdown-subitem"><a href="/note/nodejs/" class="nav-link">NodeJs笔记</a></li><li class="dropdown-subitem"><a href="/note/reg/" class="nav-link">正则表达式笔记</a></li><li class="dropdown-subitem"><a href="/note/vue/" class="nav-link">Vue笔记</a></li><li class="dropdown-subitem"><a href="/note/react/" class="nav-link">react笔记</a></li><li class="dropdown-subitem"><a href="/note/wx/" class="nav-link">微信小程序笔记</a></li><li class="dropdown-subitem"><a href="/note/uniapp/" class="nav-link">uniapp笔记</a></li><li class="dropdown-subitem"><a href="/note/echarts/" class="nav-link">echarts笔记</a></li><li class="dropdown-subitem"><a href="/note/git/" class="nav-link">Git笔记</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><a href="/back/" class="link-title">后端</a> <span class="title" style="display:none;">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/java/" class="nav-link">JAVA</a></li><li class="dropdown-item"><!----> <a href="/note/javaweb/" class="nav-link">JavaWeb</a></li><li class="dropdown-item"><!----> <a href="/note/mysql/" class="nav-link">MySql</a></li><li class="dropdown-item"><!----> <a href="/note/ssm/" class="nav-link">ssm</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法" class="dropdown-title"><a href="/algor/" class="link-title">算法</a> <span class="title" style="display:none;">算法</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/sf/" class="nav-link">算法训练营</a></li><li class="dropdown-item"><!----> <a href="/note/js-sf/" class="nav-link">js数据结构与算法</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试" class="dropdown-title"><a href="/mianshi/" class="link-title">面试</a> <span class="title" style="display:none;">面试</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/lqb/" class="nav-link">蓝桥杯备战</a></li><li class="dropdown-item"><!----> <a href="/note/ms/" class="nav-link">前端面试</a></li><li class="dropdown-item"><!----> <a href="/note/hmms/" class="nav-link">黑马面试</a></li><li class="dropdown-item"><!----> <a href="/note/xzms/" class="nav-link">校招零距离面试</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="解决方案" class="dropdown-title"><a href="/resolve/" class="link-title">解决方案</a> <span class="title" style="display:none;">解决方案</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/qd-resolve/" class="nav-link">前端解决方案</a></li><li class="dropdown-item"><!----> <a href="/note/hd-resolve/" class="nav-link">后端解决方案</a></li></ul></div></div><div class="nav-item"><a href="/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/linxin1123/vuepress-blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://lingxin-tanhua.oss-cn-shanghai.aliyuncs.com/QQ%E6%88%AA%E5%9B%BE20220503092755.png"> <div class="blogger-info"><h3>lingxin</h3> <span>凌歆</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/html/" class="nav-link">HTML笔记</a></li><li class="dropdown-subitem"><a href="/note/js-low/" class="nav-link">JavaScript基础笔记</a></li><li class="dropdown-subitem"><a href="/note/js-high/" class="nav-link">JavaScript高阶笔记</a></li><li class="dropdown-subitem"><a href="/note/js-dom-bom/" class="nav-link">JavaScript DOM和BOM笔记</a></li><li class="dropdown-subitem"><a href="/note/jquery/" class="nav-link">jQuery笔记</a></li><li class="dropdown-subitem"><a href="/note/ajax/" class="nav-link">Ajax笔记</a></li><li class="dropdown-subitem"><a href="/note/nodejs/" class="nav-link">NodeJs笔记</a></li><li class="dropdown-subitem"><a href="/note/reg/" class="nav-link">正则表达式笔记</a></li><li class="dropdown-subitem"><a href="/note/vue/" class="nav-link">Vue笔记</a></li><li class="dropdown-subitem"><a href="/note/react/" class="nav-link">react笔记</a></li><li class="dropdown-subitem"><a href="/note/wx/" class="nav-link">微信小程序笔记</a></li><li class="dropdown-subitem"><a href="/note/uniapp/" class="nav-link">uniapp笔记</a></li><li class="dropdown-subitem"><a href="/note/echarts/" class="nav-link">echarts笔记</a></li><li class="dropdown-subitem"><a href="/note/git/" class="nav-link">Git笔记</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><a href="/back/" class="link-title">后端</a> <span class="title" style="display:none;">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/java/" class="nav-link">JAVA</a></li><li class="dropdown-item"><!----> <a href="/note/javaweb/" class="nav-link">JavaWeb</a></li><li class="dropdown-item"><!----> <a href="/note/mysql/" class="nav-link">MySql</a></li><li class="dropdown-item"><!----> <a href="/note/ssm/" class="nav-link">ssm</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法" class="dropdown-title"><a href="/algor/" class="link-title">算法</a> <span class="title" style="display:none;">算法</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/sf/" class="nav-link">算法训练营</a></li><li class="dropdown-item"><!----> <a href="/note/js-sf/" class="nav-link">js数据结构与算法</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试" class="dropdown-title"><a href="/mianshi/" class="link-title">面试</a> <span class="title" style="display:none;">面试</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/lqb/" class="nav-link">蓝桥杯备战</a></li><li class="dropdown-item"><!----> <a href="/note/ms/" class="nav-link">前端面试</a></li><li class="dropdown-item"><!----> <a href="/note/hmms/" class="nav-link">黑马面试</a></li><li class="dropdown-item"><!----> <a href="/note/xzms/" class="nav-link">校招零距离面试</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="解决方案" class="dropdown-title"><a href="/resolve/" class="link-title">解决方案</a> <span class="title" style="display:none;">解决方案</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/qd-resolve/" class="nav-link">前端解决方案</a></li><li class="dropdown-item"><!----> <a href="/note/hd-resolve/" class="nav-link">后端解决方案</a></li></ul></div></div><div class="nav-item"><a href="/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/linxin1123/vuepress-blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>学习笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>蓝桥杯备战</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>前端面试</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>黑马面试</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/63837c/" class="sidebar-link">第一阶段-cnblog</a></li><li><a href="/pages/12b817/" aria-current="page" class="active sidebar-link">JavaScript-cnblog</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/pages/12b817/#javascript" class="sidebar-link">JavaScript</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_1-javascript-数据类型" class="sidebar-link">1. JavaScript 数据类型</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_2-undefined出现场景" class="sidebar-link">2. Undefined出现场景</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_3-null类型" class="sidebar-link">3. NUll类型</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_4-undefined与null的相同点和不同点" class="sidebar-link">4. undefined与null的相同点和不同点</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_5-boolean类型转换" class="sidebar-link">5. Boolean类型转换</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_6-number类型" class="sidebar-link">6. Number类型</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_7-isnan与number-isnan" class="sidebar-link">7. isNaN与Number.isNaN</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_8-string-类型" class="sidebar-link">8. String 类型</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_9-字符串处理" class="sidebar-link">9. 字符串处理</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_10-比较运算符" class="sidebar-link">10. 比较运算符</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_11-typeof运算符" class="sidebar-link">11. typeof运算符</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_12-判断对象是否为空对象" class="sidebar-link">12. 判断对象是否为空对象</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_13-判断是否为空数组" class="sidebar-link">13. 判断是否为空数组</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_14-流程控制中switch的比较" class="sidebar-link">14. 流程控制中switch的比较</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_15-引用数据类型" class="sidebar-link">15. 引用数据类型</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_16-new-关键字的原理" class="sidebar-link">16. new 关键字的原理</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_17-判断对象的属性自己身上没有而原型身上有" class="sidebar-link">17. 判断对象的属性自己身上没有而原型身上有</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_18-object-create的源码" class="sidebar-link">18. Object.create的源码</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_19-判断对象的属性是否可枚举" class="sidebar-link">19. 判断对象的属性是否可枚举</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_20-newobject的注意点" class="sidebar-link">20 newObject的注意点</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_21-模拟new操作符" class="sidebar-link">21. 模拟new操作符</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_21-获取引用类型的原型名称" class="sidebar-link">21. 获取引用类型的原型名称</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_22-使用reduce实现统计数组中每个元素的出现次数" class="sidebar-link">22 使用reduce实现统计数组中每个元素的出现次数</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_23-es6的扩展运算符实现最大值最小值" class="sidebar-link">23. es6的扩展运算符实现最大值最小值</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_24-手写find函数" class="sidebar-link">24. 手写find函数</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_25-手写filter函数" class="sidebar-link">25 手写filter函数</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_26-手写some函数" class="sidebar-link">26. 手写some函数</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_27-every函数" class="sidebar-link">27. every函数</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_28-书写map函数" class="sidebar-link">28. 书写map函数</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_28-手写reduce函数" class="sidebar-link">28. 手写reduce函数</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_29-函数定义的三种方式" class="sidebar-link">29. 函数定义的三种方式</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_30-arguments对象" class="sidebar-link">30. arguments对象</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_31-构造函数与普通函数的区别" class="sidebar-link">31. 构造函数与普通函数的区别</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_32-作用域和作用域链" class="sidebar-link">32. 作用域和作用域链</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_33-变量被赋值全局变量-啥也不干报错" class="sidebar-link">33 变量被赋值全局变量，啥也不干报错</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_34-函数提升" class="sidebar-link">34. 函数提升</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_35-闭包" class="sidebar-link">35. 闭包</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_36-this指向" class="sidebar-link">36.this指向</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_37-apply的使用场景" class="sidebar-link">37 apply的使用场景</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_38-call的使用场景" class="sidebar-link">38 call的使用场景</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_39-手写call函数" class="sidebar-link">39. 手写Call函数</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_40-手写apply" class="sidebar-link">40 手写apply</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_41-手写bind" class="sidebar-link">41. 手写bind</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/12b817/#对象" class="sidebar-link">对象</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_42-对象属性定义" class="sidebar-link">42. 对象属性定义</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_43-对象的创建" class="sidebar-link">43. 对象的创建</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_44-深浅拷贝" class="sidebar-link">44. 深浅拷贝</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_45-原型对象的重写" class="sidebar-link">45. 原型对象的重写</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_46-继承" class="sidebar-link">46. 继承</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_47-jquery模拟实现" class="sidebar-link">47. jQuery模拟实现</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_48-jquery实现选择器" class="sidebar-link">48. jQuery实现选择器</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_49-jquery实现html" class="sidebar-link">49. jQuery实现html</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_50-jquery实现extend" class="sidebar-link">50 jQuery实现extend</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_51-extend-实现多个参数传递" class="sidebar-link">51. extend 实现多个参数传递</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/12b817/#dom" class="sidebar-link">DOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_52-选择器" class="sidebar-link">52. 选择器</a></li><li class="sidebar-sub-header level4"><a href="/pages/12b817/#注意点" class="sidebar-link">注意点</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_53-htmlcollection对象与nodelist对象" class="sidebar-link">53. HTMLCollection对象与NodeList对象</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_54-dom操作" class="sidebar-link">54. DOM操作</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_54-优化dom操作" class="sidebar-link">54 优化dom操作</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_55-事件捕获阶段-目标阶段-冒泡阶段" class="sidebar-link">55. 事件捕获阶段，目标阶段，冒泡阶段</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_56-事件对象" class="sidebar-link">56 事件对象</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_57-触发事件的目标对象" class="sidebar-link">57 触发事件的目标对象</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_58-事件模型" class="sidebar-link">58 事件模型</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_59-事件委托" class="sidebar-link">59  事件委托</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_60-浏览器的重绘和重排" class="sidebar-link">60 浏览器的重绘和重排</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/12b817/#ajax" class="sidebar-link">AJAX</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_61-ajax的基本使用" class="sidebar-link">61 AJAX的基本使用</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_62-ajax的优缺点" class="sidebar-link">62. AJAX的优缺点</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_63-get和post请求" class="sidebar-link">63. get和post请求</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_64-浏览器的同源策略" class="sidebar-link">64. 浏览器的同源策略</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_65-跨域" class="sidebar-link">65 跨域</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/12b817/#es6" class="sidebar-link">ES6</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_66-let-与-var" class="sidebar-link">66 . let 与 var</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_67-块级作用域" class="sidebar-link">67. 块级作用域</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_68-let暂时性死区" class="sidebar-link">68. let暂时性死区</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_68-let-不允许重复声明" class="sidebar-link">68. let 不允许重复声明</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_69-const" class="sidebar-link">69. const</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_70-解构赋值" class="sidebar-link">70. 解构赋值</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_71-对象解构赋值" class="sidebar-link">71. 对象解构赋值</a></li><li class="sidebar-sub-header level4"><a href="/pages/12b817/#嵌套结构对象的解构" class="sidebar-link">嵌套结构对象的解构</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_72-解构赋值的好处" class="sidebar-link">72. 解构赋值的好处</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_73-扩展运算符-将数组分离成一个个参数" class="sidebar-link">73. 扩展运算符(将数组分离成一个个参数)</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_73-rest运算符-将剩余参数组合成数组" class="sidebar-link">73- rest运算符(将剩余参数组合成数组)</a></li><li class="sidebar-sub-header level4"><a href="/pages/12b817/#切割变量" class="sidebar-link">切割变量</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_74-扩展运算符和剩余运算符的区分" class="sidebar-link">74. 扩展运算符和剩余运算符的区分</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_75-箭头函数" class="sidebar-link">75. 箭头函数</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_76-es6中属性和方法的简写" class="sidebar-link">76. ES6中属性和方法的简写</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_77-浅拷贝" class="sidebar-link">77 浅拷贝</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_78-symbol" class="sidebar-link">78 Symbol</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_79-proxy" class="sidebar-link">79. Proxy</a></li><li class="sidebar-sub-header level4"><a href="/pages/12b817/#应用场景1-值的校验" class="sidebar-link">应用场景1---值的校验</a></li><li class="sidebar-sub-header level4"><a href="/pages/12b817/#应用场景2-vue3响应式原理" class="sidebar-link">应用场景2-vue3响应式原理</a></li><li class="sidebar-sub-header level4"><a href="/pages/12b817/#应用场景-实现私有属性" class="sidebar-link">应用场景-实现私有属性</a></li><li class="sidebar-sub-header level3"><a href="/pages/12b817/#_80-set" class="sidebar-link">80 set</a></li></ul></li></ul></li><li><a href="/pages/c9e154/" class="sidebar-link">JavaScript(二)-cnblog</a></li><li><a href="/pages/4cd0e6/" class="sidebar-link">Vue知识点-cnblog</a></li><li><a href="/pages/3c78ec/" class="sidebar-link">VueRoute知识点-cnblog</a></li><li><a href="/pages/c59cc0/" class="sidebar-link">Vue响应式原理</a></li><li><a href="/pages/83cc7a/" class="sidebar-link">Vue虚拟DOM-cnblog</a></li><li><a href="/pages/0b785d/" class="sidebar-link">Vuex</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>校招零距离面试</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06225672><div class="articleInfo" data-v-06225672><ul class="breadcrumbs" data-v-06225672><li data-v-06225672><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-06225672></a></li> <li data-v-06225672><a href="/mianshi/#面试" data-v-06225672>面试</a></li><li data-v-06225672><a href="/mianshi/#黑马面试" data-v-06225672>黑马面试</a></li></ul> <div class="info" data-v-06225672><div title="作者" class="author iconfont icon-touxiang" data-v-06225672><a href="https://github.com/linxin1123" target="_blank" title="作者" class="beLink" data-v-06225672>lingxin</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06225672><a href="javascript:;" data-v-06225672>2023-03-10</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">JavaScript-cnblog<!----></h1>  <div class="theme-vdoing-content content__default"><h2 id="javascript"><a href="#javascript" class="header-anchor">#</a> JavaScript</h2> <h3 id="_1-javascript-数据类型"><a href="#_1-javascript-数据类型" class="header-anchor">#</a> 1. JavaScript 数据类型</h3> <ul><li>普通数据类型：Undefined，Boolean，Number，<strong>NUll</strong>，String，Symbol(es6新增)</li> <li>复杂数据类型：Function,Array,Object,Date(),Map，Set</li></ul> <h3 id="_2-undefined出现场景"><a href="#_2-undefined出现场景" class="header-anchor">#</a> 2. Undefined出现场景</h3> <ul><li>变量只声明，不初始化</li> <li><strong>获取一个对象不存在的属性</strong></li> <li>接收一个没有返回值的函数结果</li> <li>函数的实参不传递或者实参个数小于形参</li></ul> <h3 id="_3-null类型"><a href="#_3-null类型" class="header-anchor">#</a> 3. NUll类型</h3> <ul><li>定义：一个空指针对象</li> <li>出现场景
<ul><li>变量初始化，赋值为null</li> <li>获取dom元素，获取不到为null</li> <li>正则表达式匹配不到，返回为null</li></ul></li></ul> <h3 id="_4-undefined与null的相同点和不同点"><a href="#_4-undefined与null的相同点和不同点" class="header-anchor">#</a> 4. undefined与null的相同点和不同点</h3> <p><strong>相同点</strong></p> <ul><li>字面值都是只有一个，undefined--&gt;undefined,null--&gt;object, typeof 检测</li> <li>转换为Boolean类型都是false----&gt; null==undefined</li> <li>不能转换成对象---&gt;抛出typeError异常</li></ul> <p><strong>不同点</strong></p> <ul><li><p>null是一个关键字，而undefined是一个全局变量---&gt;挂载在window对象或global对象上</p></li> <li><p>数值转换 null+1=1,undefined+1=NaN</p></li></ul> <h3 id="_5-boolean类型转换"><a href="#_5-boolean类型转换" class="header-anchor">#</a> 5. Boolean类型转换</h3> <p><strong>数值型</strong></p> <ul><li>NaN，0---&gt;false,其他true</li></ul> <p><strong>String</strong></p> <ul><li>''--&gt;false,其他true</li></ul> <p><strong>Function</strong></p> <ul><li>true</li></ul> <p><strong>Object</strong></p> <ul><li>null---&gt;false,其他true</li></ul> <h3 id="_6-number类型"><a href="#_6-number类型" class="header-anchor">#</a> 6. Number类型</h3> <ul><li>抛异常情况</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> num<span class="token operator">=</span>0xah   h超过了<span class="token number">16</span>进制标识
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>类型转换(Number()函数)</strong></p> <ul><li>undefined---&gt;NaN</li> <li>null---&gt;0</li> <li>true---&gt;1</li> <li>false---&gt;0</li> <li>''---&gt;0</li> <li>'   '---&gt;0</li> <li>'12'---&gt;12</li> <li>'012'---&gt;12</li> <li>'0012'---&gt;12</li> <li>'00.12'---&gt;0.12</li> <li>'0x10'---&gt;16</li> <li>'123abc'---&gt;NaN</li> <li>object---&gt;调用对象的valueof方法---&gt;上面不行调用toString方法</li></ul> <p><strong>parseInt函数</strong></p> <ul><li><p>语法规则：parseInt(字符串,进制)</p></li> <li><p>作用：解析一个字符串返回数字</p></li> <li><p>如果传入不是字符串，则隐式转换成字符串再进行解析</p></li> <li><p>'abc'---&gt;NaN</p></li> <li><p>'fg123'，16---&gt;15(前缀匹配，f满足16进制声明，后面g第一个不匹配，直接舍弃)</p></li> <li><p>12---&gt;12</p></li> <li><p>'12*2'---&gt;12</p></li> <li><p>12*2---&gt;24</p></li> <li><p>'12.97'---&gt;12</p></li> <li><p>与map连用的注意点</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span><span class="token string">'2'</span><span class="token punctuation">,</span><span class="token string">'3'</span><span class="token punctuation">,</span><span class="token string">'4'</span><span class="token punctuation">]</span>

<span class="token keyword">let</span> result<span class="token operator">=</span>arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>parseInt<span class="token punctuation">)</span>

<span class="token comment">// 等价于</span>
<span class="token keyword">let</span> result<span class="token operator">=</span>arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span>index</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token function">parseInt</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span>index<span class="token punctuation">)</span> <span class="token comment">// 这里第二个参数出现问题</span>
    <span class="token string">'1'</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token number">1</span> 原样返回
    <span class="token string">'2'</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">&gt;</span><span class="token number">NaN</span> 不符合规范
    <span class="token string">'3'</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">&gt;</span><span class="token number">NaN</span>
    <span class="token string">'4'</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">&gt;</span><span class="token number">NaN</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p><strong>parseFloat</strong></p> <ul><li><p>字符串解析成浮点数</p></li> <li><p>参数只有一个，无进制概念</p></li> <li><p>前置匹配</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">'   2.3'</span><span class="token punctuation">)</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">&gt;</span><span class="token number">2.3</span>
<span class="token string">'12.23.33'</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span><span class="token number">12.23</span>
<span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span>
无进制概念
<span class="token string">'fg123'</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">&gt;</span><span class="token number">NaN</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_7-isnan与number-isnan"><a href="#_7-isnan与number-isnan" class="header-anchor">#</a> 7. isNaN与Number.isNaN</h3> <ul><li><p>NaN<strong>和谁都不相等</strong></p></li> <li><p>isNaN：判断一个值是否能被转换成数字类型(es5)</p> <ul><li>其中存在隐式转换的过程</li> <li>'abc'--&gt;NaN  true</li> <li>'undefined'---&gt;NaN true</li> <li>NaN---&gt;Nan  true</li> <li>{}----&gt;NaN  true</li></ul></li> <li><p>Number.isNaN:直接判断值是否为NaN(es6添加)</p> <ul><li>只有NaN才会返回true，解除了二义性</li></ul></li></ul> <h3 id="_8-string-类型"><a href="#_8-string-类型" class="header-anchor">#</a> 8. String 类型</h3> <p><strong>创建字符串的方式</strong></p> <ul><li>字面量创建：let str='123'</li> <li>String() :let str=String('123')</li> <li>new String():let str=new String('123')</li></ul> <p><strong>区别</strong></p> <ul><li>字面量创建和String()创建的是基本字符串，比较时只比较值</li> <li>new String()创建的返回的一个对象实例，比较时比较的是内存地址</li></ul> <p><strong>String实例对象特性</strong></p> <ul><li>原型链上由许多方法</li> <li>基本字符串也可以调用（为什么）
<ul><li>调用是隐式转换（自动装配成String包装类型）</li></ul></li></ul> <h3 id="_9-字符串处理"><a href="#_9-字符串处理" class="header-anchor">#</a> 9. 字符串处理</h3> <ul><li>字符串转数组---&gt; arr.split(&quot;&quot;)</li> <li>数组翻转：arr.reserve()</li> <li>字符串下标字符：str.chatAt(i)</li> <li>字符串下标ascall：str.charAtCode(i)</li> <li>下标的值，str.indexOf('char')</li> <li>倒着来下标的值,str.lastIndexOf('char')</li></ul> <h3 id="_10-比较运算符"><a href="#_10-比较运算符" class="header-anchor">#</a> 10. 比较运算符</h3> <p><strong>三等于运算符</strong></p> <ol><li>先比较值的类型是否相同</li> <li>再比较值是否相同</li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// Number存在类型转换</span>
<span class="token number">1</span><span class="token operator">===</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>  <span class="token boolean">true</span>

<span class="token comment">// new出来的是基本数据类型的包装类型</span>
<span class="token number">1</span><span class="token operator">===</span><span class="token keyword">new</span> <span class="token class-name">Number</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token boolean">false</span>

<span class="token comment">// </span>
<span class="token string">'hello'</span><span class="token operator">===</span><span class="token function">String</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span> <span class="token comment">// 都是基本类型true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><strong>双等于运算符</strong></p> <ul><li>比较更加复杂
<ol><li>先比较值的类型是否相同</li> <li>不相同则进行隐式类型转换，转换为相同的类型，再进行值的比较</li></ol></li></ul> <p><strong>隐式转换规则</strong></p> <ul><li>字符串和数值---&gt;字符串转换为数值</li> <li>一方为boolean类型，boolean类型转换为数值</li></ul> <h3 id="_11-typeof运算符"><a href="#_11-typeof运算符" class="header-anchor">#</a> 11. typeof运算符</h3> <ul><li><p><strong>type of class ：注意是function</strong></p></li> <li><p>typeof 6/2  :NaN</p></li> <li><p>typeof (6/2):number</p></li></ul> <h3 id="_12-判断对象是否为空对象"><a href="#_12-判断对象是否为空对象" class="header-anchor">#</a> 12. 判断对象是否为空对象</h3> <ul><li><p>JSON.stringify(obj)===''</p></li> <li><p>hasOwnProperty</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> obj<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">isEmpty</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token keyword">for</span><span class="token punctuation">(</span>key <span class="token keyword">of</span> obj<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="_13-判断是否为空数组"><a href="#_13-判断是否为空数组" class="header-anchor">#</a> 13. 判断是否为空数组</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>arr <span class="token keyword">instanceof</span> <span class="token class-name">Array</span> <span class="token operator">&amp;&amp;</span> arr<span class="token punctuation">.</span>length<span class="token operator">&lt;=</span><span class="token number">0</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_14-流程控制中switch的比较"><a href="#_14-流程控制中switch的比较" class="header-anchor">#</a> 14. 流程控制中switch的比较</h3> <ul><li>为===比较</li></ul> <h3 id="_15-引用数据类型"><a href="#_15-引用数据类型" class="header-anchor">#</a> 15. 引用数据类型</h3> <ul><li>堆内存，栈内存存放地址</li> <li>通过new关键字创建</li></ul> <h3 id="_16-new-关键字的原理"><a href="#_16-new-关键字的原理" class="header-anchor">#</a> 16. new 关键字的原理</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">username<span class="token punctuation">,</span>sex</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>username<span class="token operator">=</span>username
    <span class="token keyword">this</span><span class="token punctuation">.</span>sex<span class="token operator">=</span>sex
    
    <span class="token comment">// 这里默认return this</span>
<span class="token punctuation">}</span>

<span class="token comment">// 等价于</span>

<span class="token comment">// new 关键字做的事情</span>
	<span class="token keyword">var</span> person<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
    person<span class="token punctuation">.</span>__proto__<span class="token operator">=</span><span class="token class-name">Person</span><span class="token punctuation">.</span>prototype
    <span class="token function">Person</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="_17-判断对象的属性自己身上没有而原型身上有"><a href="#_17-判断对象的属性自己身上没有而原型身上有" class="header-anchor">#</a> 17. 判断对象的属性自己身上没有而原型身上有</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">propertyInPrototype</span><span class="token punctuation">(</span><span class="token parameter">obj<span class="token punctuation">,</span>pro</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">!</span>obj<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>pro<span class="token punctuation">)</span><span class="token operator">&amp;&amp;</span> pro <span class="token keyword">in</span> obj
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="_18-object-create的源码"><a href="#_18-object-create的源码" class="header-anchor">#</a> 18. Object.create的源码</h3> <ul><li>用于寄生继承（创建一个空对象，对象的原型指向要继承的原型）</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Object<span class="token punctuation">.</span><span class="token function-variable function">create</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">proto<span class="token punctuation">,</span>protoProperty</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token comment">// 构造函数</span>
    <span class="token keyword">function</span> <span class="token constant">F</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        
    <span class="token punctuation">}</span>
    
    <span class="token class-name">F</span><span class="token punctuation">.</span>prototype<span class="token operator">=</span>proto
    
    <span class="token comment">// 第二个参数一个对象</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>protoProperty<span class="token punctuation">)</span><span class="token punctuation">{</span>
         Object<span class="token punctuation">.</span><span class="token function">defineProperties</span><span class="token punctuation">(</span><span class="token constant">F</span><span class="token punctuation">,</span> protoProperty<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">F</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="_19-判断对象的属性是否可枚举"><a href="#_19-判断对象的属性是否可枚举" class="header-anchor">#</a> 19. 判断对象的属性是否可枚举</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>stu<span class="token punctuation">.</span><span class="token function">propertyIsEnumerable</span><span class="token punctuation">(</span><span class="token string">&quot;sayHello&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false :sayHello属于原型上的函数</span>
      <span class="token comment">//将userName属性设置为不可枚举</span>
      Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>stu<span class="token punctuation">,</span> <span class="token string">&quot;userName&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">enumerable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_20-newobject的注意点"><a href="#_20-newobject的注意点" class="header-anchor">#</a> 20 newObject的注意点</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> a<span class="token operator">=</span><span class="token punctuation">{</span><span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">16</span><span class="token punctuation">}</span>
<span class="token keyword">const</span> b<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
b<span class="token operator">===</span>a <span class="token comment">// true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="_21-模拟new操作符"><a href="#_21-模拟new操作符" class="header-anchor">#</a> 21. 模拟new操作符</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>age</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">=</span>name
    <span class="token keyword">this</span><span class="token punctuation">.</span>age<span class="token operator">=</span>age
    
<span class="token punctuation">}</span>


<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sayHi</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'666'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">New</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token keyword">var</span> obj<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
    
    <span class="token function">Person</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span>arguments<span class="token punctuation">)</span>
    
    obj<span class="token punctuation">.</span>__proto__<span class="token operator">=</span><span class="token class-name">Person</span><span class="token punctuation">.</span>prototype
    
    <span class="token keyword">return</span> obj
<span class="token punctuation">}</span>

<span class="token function">New</span><span class="token punctuation">(</span><span class="token string">&quot;name&quot;</span><span class="token punctuation">,</span><span class="token string">'18'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span>


</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h3 id="_21-获取引用类型的原型名称"><a href="#_21-获取引用类型的原型名称" class="header-anchor">#</a> 21. 获取引用类型的原型名称</h3> <p><strong>instanceof</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> arr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span>

arr <span class="token keyword">instanceof</span> <span class="token class-name">Array</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>判断它最近一层的构造函数</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> arr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span>

arr<span class="token punctuation">.</span><span class="token class-name">__proto__</span><span class="token punctuation">.</span>constructor <span class="token operator">===</span> Array
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>使用Object的toString方法</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> arr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span>

<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>兼容性解决isArray方法</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>Array<span class="token punctuation">.</span>isArray<span class="token punctuation">)</span><span class="token punctuation">{</span>
    Array<span class="token punctuation">.</span><span class="token function-variable function">isArray</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">args</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>args<span class="token punctuation">)</span><span class="token operator">===</span><span class="token string">'[object Array]'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_22-使用reduce实现统计数组中每个元素的出现次数"><a href="#_22-使用reduce实现统计数组中每个元素的出现次数" class="header-anchor">#</a> 22 使用reduce实现统计数组中每个元素的出现次数</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>
<span class="token keyword">function</span> <span class="token function">getCount</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">pre<span class="token punctuation">,</span>next</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        pre<span class="token punctuation">[</span>next<span class="token punctuation">]</span><span class="token operator">?</span> pre<span class="token punctuation">[</span>next<span class="token punctuation">]</span><span class="token operator">++</span><span class="token operator">:</span><span class="token punctuation">(</span>pre<span class="token punctuation">[</span>next<span class="token punctuation">]</span><span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">)</span>
        
        <span class="token keyword">return</span> pre
    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="_23-es6的扩展运算符实现最大值最小值"><a href="#_23-es6的扩展运算符实现最大值最小值" class="header-anchor">#</a> 23. es6的扩展运算符实现最大值最小值</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> arr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">,</span><span class="token number">20</span><span class="token punctuation">]</span>

Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span> <span class="token comment">// 获取最小值</span>
Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span> <span class="token comment">// 获取最小值</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="_24-手写find函数"><a href="#_24-手写find函数" class="header-anchor">#</a> 24. 手写find函数</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">myFind</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// 判断callback是否为函数</span>
    
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> callback <span class="token operator">!==</span><span class="token string">'function'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'参数不是函数'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    
    <span class="token comment">// this为方法调用者，也就是数组本身</span>
    <span class="token keyword">let</span> length<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>length
    
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        
        <span class="token keyword">let</span> res<span class="token operator">=</span><span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>i<span class="token punctuation">)</span>
        
        <span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 找到了</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    
    <span class="token comment">// 找不到</span>
    <span class="token keyword">return</span> <span class="token keyword">undefined</span>
    
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="_25-手写filter函数"><a href="#_25-手写filter函数" class="header-anchor">#</a> 25 手写filter函数</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">myFilter</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token comment">// 判断callback是否为函数</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> callback <span class="token operator">!==</span><span class="token string">'function'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'参数不是函数'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">let</span> length<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>length
    
    <span class="token comment">// 返回值为一个新的数组</span>
    <span class="token keyword">let</span> arr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
    
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">let</span> res<span class="token operator">=</span><span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>i<span class="token punctuation">)</span>
        
        <span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 满足条件---&gt;加入数组</span>
            arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> arr
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="_26-手写some函数"><a href="#_26-手写some函数" class="header-anchor">#</a> 26. 手写some函数</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">myFilter</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token comment">// 判断callback是否为函数</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> callback <span class="token operator">!==</span><span class="token string">'function'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'参数不是函数'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">let</span> length<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>length
    
    <span class="token comment">// 返回值为一个boolean值</span>
    <span class="token keyword">let</span> flag<span class="token operator">=</span><span class="token boolean">false</span>
    
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">let</span> res<span class="token operator">=</span><span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>i<span class="token punctuation">)</span>
        
        <span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 满足条件---&gt;加入数组</span>
            flag<span class="token operator">=</span><span class="token boolean">true</span>
            <span class="token keyword">break</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> flag
    
    
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h3 id="_27-every函数"><a href="#_27-every函数" class="header-anchor">#</a> 27. every函数</h3> <ul><li>和some基本一致</li></ul> <h3 id="_28-书写map函数"><a href="#_28-书写map函数" class="header-anchor">#</a> 28. 书写map函数</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">myFilter</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token comment">// 判断callback是否为函数</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> callback <span class="token operator">!==</span><span class="token string">'function'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'参数不是函数'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">let</span> length<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>length
    
    <span class="token comment">// 返回值为一个新的数组</span>
    <span class="token keyword">let</span> newArr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
    
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        
        <span class="token comment">// 注意这里为修改后的对象</span>
        <span class="token keyword">let</span> res<span class="token operator">=</span><span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>i<span class="token punctuation">)</span>
        
        <span class="token comment">//  我们需要进行深拷贝解除引用的关系</span>
        
        <span class="token comment">// 我们对象才进行深拷贝</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> res<span class="token operator">===</span><span class="token string">'object'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">let</span> newItem<span class="token operator">=</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        
        newArr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>newItem<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> newArr
    
    
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><h3 id="_28-手写reduce函数"><a href="#_28-手写reduce函数" class="header-anchor">#</a> 28. 手写reduce函数</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">myFilter</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">callback<span class="token punctuation">,</span>initValue</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token comment">// 判断callback是否为函数</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> callback <span class="token operator">!==</span><span class="token string">'function'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'参数不是函数'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">let</span> length<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>length
    
    <span class="token comment">// 判断数组长度</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>length<span class="token operator">&lt;=</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 空数组</span>
        
       <span class="token keyword">if</span><span class="token punctuation">(</span>initValue<span class="token punctuation">)</span><span class="token punctuation">{</span>
           <span class="token keyword">return</span> initValue
       <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
           <span class="token keyword">return</span> <span class="token keyword">undefined</span>
       <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span>
    
    <span class="token comment">// 判断是否存在初始值</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>initValue<span class="token punctuation">)</span><span class="token punctuation">{</span>
        initValue<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span>
        i<span class="token operator">++</span>
    <span class="token punctuation">}</span>
    
    
    <span class="token keyword">for</span><span class="token punctuation">(</span>i<span class="token punctuation">;</span>i<span class="token operator">&lt;</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        
        <span class="token comment">// 注意这里为新的initValue</span>
        initValue<span class="token operator">=</span><span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span>initValue<span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>i<span class="token punctuation">)</span>
        
        
        
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> initValue
    
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br></div></div><h3 id="_29-函数定义的三种方式"><a href="#_29-函数定义的三种方式" class="header-anchor">#</a> 29. 函数定义的三种方式</h3> <ul><li>函数声明</li> <li>函数表达式</li> <li>构造函数</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 构造函数的形式，最后一个参数为函数体</span>
<span class="token keyword">var</span> fn<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Function</span><span class="token punctuation">(</span><span class="token string">'num1'</span><span class="token punctuation">,</span><span class="token string">'num2'</span><span class="token punctuation">,</span><span class="token string">'return num1+num2'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>构造函数创建函数的特点</strong></p> <ul><li>效率较低</li> <li>作用域为顶级作用域</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> a<span class="token operator">=</span><span class="token number">12</span>

<span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token keyword">var</span> a<span class="token operator">=</span><span class="token number">11</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Function</span><span class="token punctuation">(</span><span class="token string">'return a'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 结果为12 为顶级作用域的a</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="_30-arguments对象"><a href="#_30-arguments对象" class="header-anchor">#</a> 30. arguments对象</h3> <ul><li><p>argument只存在于函数作用域中</p></li> <li><p>结构是伪数组，可通过下标访问</p></li> <li><p>内部添加argument通过下标添加，不会发生变化</p></li></ul> <p><strong>应用</strong></p> <ul><li>可以判断参数个数</li> <li>可以实现方法重载，参数可以不同，但都可以通过arguments对象获取</li></ul> <h3 id="_31-构造函数与普通函数的区别"><a href="#_31-构造函数与普通函数的区别" class="header-anchor">#</a> 31. 构造函数与普通函数的区别</h3> <ul><li>构造函数一般首字母大写</li> <li>构造函数需要配合new使用</li> <li>构造函数内部可以使用this指向挂载</li> <li>构造函数的执行过程（this执向，默认返回this）</li></ul> <h3 id="_32-作用域和作用域链"><a href="#_32-作用域和作用域链" class="header-anchor">#</a> 32. 作用域和作用域链</h3> <ul><li>作用域：一个变量定义的调用的范围</li> <li>作用域链，查找变量时先查找当前作用域，找不到就往外层作用域进行查找，查找的过程就形成了作用域链</li></ul> <h3 id="_33-变量被赋值全局变量-啥也不干报错"><a href="#_33-变量被赋值全局变量-啥也不干报错" class="header-anchor">#</a> 33 变量被赋值全局变量，啥也不干报错</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>
<span class="token comment">// 报错</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
    str<span class="token operator">=</span><span class="token string">'hello world'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>


<span class="token comment">// hello world</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    str<span class="token operator">=</span><span class="token string">'hello world'</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
    
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="_34-函数提升"><a href="#_34-函数提升" class="header-anchor">#</a> 34. 函数提升</h3> <ul><li>特殊例题</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> a<span class="token operator">=</span><span class="token boolean">true</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">var</span> a<span class="token operator">=</span><span class="token number">20</span>
    <span class="token punctuation">}</span>
    
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 结果为undefined</span>

<span class="token comment">// 分析程序等价于</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> a<span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">{</span>
        a<span class="token operator">=</span><span class="token number">20</span>
    <span class="token punctuation">}</span>
    
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> a<span class="token operator">=</span><span class="token number">1</span>
    <span class="token keyword">function</span> <span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        a<span class="token operator">=</span><span class="token number">10</span>
        <span class="token keyword">return</span>
        <span class="token keyword">function</span> <span class="token function">a</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    
    <span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// 1</span>

<span class="token comment">// 代码等价于</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> a<span class="token punctuation">;</span>
    <span class="token keyword">function</span> <span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">function</span> <span class="token function">a</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
        a<span class="token operator">=</span><span class="token number">10</span>
        <span class="token keyword">return</span>
    <span class="token punctuation">}</span>
    
    a<span class="token operator">=</span><span class="token number">1</span>
    <span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// a先找自己作用域a，b里面的a是全局作用域的</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h3 id="_35-闭包"><a href="#_35-闭包" class="header-anchor">#</a> 35. 闭包</h3> <ul><li>可以读取外部变量的函数</li></ul> <p><strong>出现原因</strong></p> <ul><li>内部函数维持了对外部变量的引用</li></ul> <p><strong>应用场景</strong></p> <ul><li><p>变量私有：只能是内部方法（维持对外部作用域变量的引用）进行调用修改其值</p></li> <li><p>解决延时器的问题，var循环通过立即执行函数生成闭包，维持对外部作用域的变量（形参）的引用</p></li></ul> <p><strong>特殊题，注意this指向和闭包</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>      <span class="token keyword">var</span> userName <span class="token operator">=</span> <span class="token string">&quot;zhangsan&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">&quot;lisi&quot;</span><span class="token punctuation">,</span>
        <span class="token function-variable function">method</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>userName<span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//zhangsan</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li>闭包+作用域(从函数定义区域向外找闭包)</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>    <span class="token keyword">function</span> <span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">var</span> fn <span class="token operator">=</span> <span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">200</span><span class="token punctuation">;</span>
      <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 100</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>   <span class="token keyword">function</span> <span class="token function">print</span><span class="token punctuation">(</span><span class="token parameter">fn</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">200</span><span class="token punctuation">;</span>
        <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
      <span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 100</span>
      <span class="token punctuation">}</span>
      <span class="token function">print</span><span class="token punctuation">(</span>fn<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><strong>复杂的一道题</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  	<span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> <span class="token comment">// window.num=10</span>
      <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// obj.num=20</span>
      obj<span class="token punctuation">.</span>fn <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>num <span class="token operator">=</span> num <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">;</span> <span class="token comment">// 立即执行 window.num=60</span>
        num<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token comment">// 立即执行 obj.num=21</span>
        <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>num <span class="token operator">+=</span> n<span class="token punctuation">;</span> <span class="token comment">// fn(5) wind.num=65 // fn(10) obj.num=30</span>
          num<span class="token operator">++</span><span class="token punctuation">;</span>	<span class="token comment">// fn(5) obj.num=22 // fn(10) 23</span>
          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// fn(5) 22 //fn(10)23</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
		
      <span class="token keyword">var</span> fn <span class="token operator">=</span> obj<span class="token punctuation">.</span>fn<span class="token punctuation">;</span>
      <span class="token function">fn</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      obj<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">,</span> obj<span class="token punctuation">.</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="_36-this指向"><a href="#_36-this指向" class="header-anchor">#</a> 36.this指向</h3> <ul><li>闭包+this指向</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>    <span class="token operator">&lt;</span>button id<span class="token operator">=</span><span class="token string">&quot;btn&quot;</span><span class="token operator">&gt;</span>获取用户信息<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
      <span class="token keyword">var</span> userInfo <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">&quot;zhangsan&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">&quot;lisi&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">21</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token function-variable function">getUserInfo</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// 这里的this，会进行作用域的查找，一直往外找，直到找到this（window）  </span>
              
              <span class="token comment">//  forEach的源码，是不是对传入的参数，没有进行this指向的绑定，否则this将会是this.data</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token keyword">var</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">//   btn.onclick = userInfo.getUserInfo;</span>
      btn<span class="token punctuation">.</span>onclick <span class="token operator">=</span> userInfo<span class="token punctuation">.</span><span class="token function">getUserInfo</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>userInfo<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><ul><li>处理方法，使用that保存this</li> <li>使用箭头函数</li></ul> <h3 id="_37-apply的使用场景"><a href="#_37-apply的使用场景" class="header-anchor">#</a> 37 apply的使用场景</h3> <ul><li>apply的传递参数为一个数组，可以改变原函数的传参方式</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 如Math.max方法</span>

<span class="token comment">// 原本的调用方法</span>
Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">)</span>

<span class="token comment">// 修改为数组传参的方式</span>
Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="_38-call的使用场景"><a href="#_38-call的使用场景" class="header-anchor">#</a> 38 call的使用场景</h3> <ul><li>伪数组转数组</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">let</span> arr<span class="token operator">=</span><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li><p>组合继承时改变this指向</p></li> <li><p>立即执行函数时的this执行</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">&quot;zhangsan&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">&quot;lisi&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> person<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// 这里的this指向window  </span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">print</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">;</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">print</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>


<span class="token comment">// 要想实现打印person中对象的值，需要修改立即执行函数中的this</span>

<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>person<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>i<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h3 id="_39-手写call函数"><a href="#_39-手写call函数" class="header-anchor">#</a> 39. 手写Call函数</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 原理，在传递进来的this指向上（挂载一个方法）（这个方法为call函数调用者，即代替调用，实现this指向修改）</span>


<span class="token function">Add</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>sub<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span>

<span class="token class-name">Function</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">myCall</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// 获取除this外的所有参数</span>
    <span class="token keyword">let</span> newArguments<span class="token operator">=</span><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span>
    
    <span class="token comment">// call函数的调用者（是一个函数）</span>
    <span class="token keyword">let</span> startPerson<span class="token operator">=</span><span class="token keyword">this</span>
    
    <span class="token comment">// 新的this指向</span>
    <span class="token keyword">let</span> newThis<span class="token operator">=</span>context<span class="token operator">||</span>window  <span class="token comment">// 没传，默认window</span>
    
    <span class="token comment">// 我们用新的this指向 调用函数（startPerson）</span>
    
    
    newThis<span class="token punctuation">.</span>fn<span class="token operator">=</span>startPerson
    
    <span class="token keyword">return</span> newThis<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>newArguments<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="_40-手写apply"><a href="#_40-手写apply" class="header-anchor">#</a> 40 手写apply</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 原理，在传递进来的this指向上（挂载一个方法）（这个方法为call函数调用者，即代替调用，实现this指向修改）</span>


<span class="token function">Add</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>sub<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span>

<span class="token class-name">Function</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">myCall</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    
    <span class="token comment">// call函数的调用者（是一个函数）</span>
    <span class="token keyword">let</span> startPerson<span class="token operator">=</span><span class="token keyword">this</span>
    
    <span class="token comment">// 新的this指向</span>
    <span class="token keyword">let</span> newThis<span class="token operator">=</span>context<span class="token operator">||</span>window  <span class="token comment">// 没传，默认window</span>
    
    <span class="token comment">// 我们用新的this指向 调用函数（startPerson）</span>
    
    
    newThis<span class="token punctuation">.</span>fn<span class="token operator">=</span>startPerson
    
    <span class="token comment">// 和call不同的地方，apply只有两个参数</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 第二个参数</span>
        <span class="token keyword">return</span> newThis<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> newThis<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
     
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h3 id="_41-手写bind"><a href="#_41-手写bind" class="header-anchor">#</a> 41. 手写bind</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 只返回一个函数，不调用</span>

<span class="token class-name">Function</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">myBind</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token comment">// 参数传递与call相同</span>
    <span class="token comment">// 获取除this外的所有参数</span>
    <span class="token keyword">let</span> newArguments<span class="token operator">=</span><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span>
    
    <span class="token comment">// call函数的调用者（是一个函数）</span>
    <span class="token keyword">let</span> startPerson<span class="token operator">=</span><span class="token keyword">this</span>
    
    <span class="token comment">// 新的this指向</span>
    <span class="token keyword">let</span> newThis<span class="token operator">=</span>context<span class="token operator">||</span>window
    
    
    <span class="token comment">// 返回值为一个函数</span>
    
    <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        
        <span class="token comment">// 这里还有一个问题，返回的函数调用时，如果传递参数</span>
        <span class="token comment">// 是不是要加进去</span>
        <span class="token keyword">let</span> bindArguments<span class="token operator">=</span><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span>
        
        <span class="token comment">// 这个函数一执行，就调用apply函数</span>
        <span class="token keyword">return</span> <span class="token function">startPerson</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>newThis<span class="token punctuation">,</span>newArguments<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>bindArguments<span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h2 id="对象"><a href="#对象" class="header-anchor">#</a> 对象</h2> <h3 id="_42-对象属性定义"><a href="#_42-对象属性定义" class="header-anchor">#</a> 42. 对象属性定义</h3> <ul><li>Object.defineProperty</li></ul> <p><strong>定义某个属性的特性</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 使属性的值变得不可修改</span>

<span class="token keyword">let</span> person<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span>

Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span><span class="token string">&quot;age&quot;</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token literal-property property">writable</span><span class="token operator">:</span><span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><strong>定义对象的get和set方法</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 定义私有变量，不想让外界直接修改，提供get和set方法进行访问</span>
<span class="token keyword">let</span> person<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token literal-property property">_age</span><span class="token operator">:</span><span class="token number">18</span>
<span class="token punctuation">}</span>

Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span><span class="token string">&quot;age&quot;</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token function-variable function">get</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_age
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    
    <span class="token function-variable function">set</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">newValue</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		    <span class="token keyword">this</span><span class="token punctuation">.</span>_age<span class="token operator">=</span>newValue
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="_43-对象的创建"><a href="#_43-对象的创建" class="header-anchor">#</a> 43. 对象的创建</h3> <ul><li>字面量</li> <li>工厂函数
<ul><li>问题：没有原型，大家都是Object</li> <li>希望的结果，Person数据类型，Teacher数据类型</li></ul></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">factory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
   
   <span class="token keyword">let</span> o<span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
   <span class="token keyword">return</span> <span class="token number">0</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>构造函数
<ul><li>原型上挂载一类对象的公共属性和方法（原型函数）</li></ul></li> <li>类</li></ul> <h3 id="_44-深浅拷贝"><a href="#_44-深浅拷贝" class="header-anchor">#</a> 44. 深浅拷贝</h3> <p><strong>浅拷贝</strong>：拷贝前后值类型互不影响，引用类型会受到影响</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">shallowCopy</span><span class="token punctuation">(</span><span class="token parameter">src</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">let</span> dst<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
    
    <span class="token comment">// 这里会遍历到继承的属性</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> val <span class="token keyword">in</span> src<span class="token punctuation">)</span><span class="token punctuation">{</span>
        
        <span class="token keyword">if</span><span class="token punctuation">(</span>src<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            dst<span class="token punctuation">[</span>val<span class="token punctuation">]</span><span class="token operator">=</span>src<span class="token punctuation">[</span>val<span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> dst
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ul><li>使用Object.assign实现对象的浅拷贝</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>dst<span class="token punctuation">,</span>src<span class="token punctuation">)</span>  <span class="token comment">// 注意这里拷贝的是对象的可枚举的类型变量</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>深拷贝</strong>：在浅拷贝的基础上，对引用数据类型的拷贝，拷贝前后互不影响</p> <ul><li>使用JSON.stringify 和 JSON.parse</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 这种方法存在的问题</span>
<span class="token comment">// 1. 拷贝时：属性是函数是，新对象没有改函数属性</span>
<span class="token comment">// 2. 新的对象的原型变成了Object</span>
<span class="token comment">// 3. 对象的属性存在循环引用时，会抛异常</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li>自己手写一个解决上述问题</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>
<span class="token keyword">let</span> map<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">WeakMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">function</span> <span class="token function">deepCopy</span><span class="token punctuation">(</span><span class="token parameter">src</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// 基本思路，如果属性是引用类型，继续递归调用改函数</span>
    <span class="token comment">// 如果是基本数据类型，返回原来的值</span>
    
    <span class="token comment">// 其实可以继续完善，如Array单独处理</span>
    <span class="token comment">// obj类型我们就通过__proto__.constructor.name获取原型类</span>
    <span class="token comment">// 对创建的{} 我们让其__proto__ 为 类的prototype</span>
    
    
    <span class="token comment">// 循环引用的问题，存储一个键值对，键位prop属性名，值为属性值</span>
    
    
    
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> src<span class="token operator">===</span><span class="token string">'object'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">let</span> newObj<span class="token operator">=</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>src<span class="token punctuation">)</span><span class="token operator">?</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
        <span class="token comment">// 遍历对象的所有属性，递归调用deepCopy</span>
        
        <span class="token comment">// 判断是否循环引用</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>map<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>src<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> src
        <span class="token punctuation">}</span>
        
        <span class="token comment">// 存储引用</span>
        <span class="token comment">// 其实就是看这个引用是否地址是否已经被创建</span>
        <span class="token comment">// 如果已经创建，则让拷贝的新对象（某个属性）直接指向即可</span>
        <span class="token comment">// 没有创建，也就是新对象某个属性的值（需要重新创建引用）</span>
        map<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>src<span class="token punctuation">,</span>newObj<span class="token punctuation">)</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span>prop <span class="token keyword">of</span> src<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">//</span>
            newObj<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token operator">=</span><span class="token function">deepCopy</span><span class="token punctuation">(</span>src<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> newObj
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> src
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br></div></div><h3 id="_45-原型对象的重写"><a href="#_45-原型对象的重写" class="header-anchor">#</a> 45. 原型对象的重写</h3> <ul><li>如果我们想在一个原型上同时添加属性和方法，又不想写多行代码，我们直接赋值一个对象</li> <li>问题就是原型关系被破坏
<ul><li>加上constructor属性解决</li></ul></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
      <span class="token class-name">Person</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">constructor</span><span class="token operator">:</span> Person<span class="token punctuation">,</span> <span class="token comment">//添加constructor</span>
        <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">&quot;zhangsan&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
        <span class="token function-variable function">sayHi</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>userName<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      person<span class="token punctuation">.</span><span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>constructor<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// Person</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="_46-继承"><a href="#_46-继承" class="header-anchor">#</a> 46. 继承</h3> <ul><li>原型链继承</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//1. 优点：实现简单，子类的实例可以访问原型链上的所有属性和方法</span>

<span class="token comment">// 2. 缺点</span>
	<span class="token comment">// 所有实例将共享父类的的属性和方法</span>
	<span class="token comment">// 如果父类的构造函数有参数，参数无法传递  new Student('123')</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>构造函数继承</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// Person.call(this)</span>

<span class="token comment">//1. 优点 解决子类向父类传递参数</span>

<span class="token comment">// 2. 子类不能访问父类的原型方法（原型链没有改变）</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>拷贝继承</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 把父类的属性和方法都赋值给子类</span>

<span class="token comment">// 1. 首先判断属性和方法在原型上还是在实例上</span>
<span class="token comment">// 2. 根据位置的不同，赋值给子类的地方也不同</span>


<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">age</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age<span class="token operator">=</span>age
    
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">sayHi</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token operator">...</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
    
<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">run</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
    
    
<span class="token comment">// 子类拷贝属性和方法</span>
<span class="token comment">// 构造方法参数按需传入</span>
    
<span class="token keyword">function</span> <span class="token function">Student</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span>age</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">let</span> person<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">of</span> person<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token operator">=</span>person<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            <span class="token comment">// 原型上</span>
            Student<span class="token punctuation">.</span>propertype<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token operator">=</span>person<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token operator">=</span>id
<span class="token punctuation">}</span>    

<span class="token comment">// 优点，可以继承属性和方法，且互不干扰</span>
<span class="token comment">// 可以向父类传递参数</span>

<span class="token comment">// 本质是没有修改原型链，而是手写一个相同的类除了名字不同，</span>
    <span class="token comment">// 本来是重写一遍，现在用代码实现了循环写</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div><ul><li>组合继承
<ul><li>构造函数继承+原型链继承</li></ul></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>问题是子类的实例的__proto__为父类的一个实例，要父类的方法，这个父类的实例只是一个跳板，并无实际作用

<span class="token comment">// 也就是，我们一个创建一个空对象，让该对象的__proto__指向父类即可</span>
<span class="token comment">// 也就是寄生组合继承</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li>寄生组合继承</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 定义Super构造函数</span>
      <span class="token keyword">function</span> <span class="token function">Super</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">//Super.prototype原型对象指向了Person.prototype</span>
      <span class="token class-name">Super</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">;</span>
<span class="token comment">//Student.prototype原型对象指向了Super的实例，这样就去掉了Person父类的实例属性。</span>
      <span class="token class-name">Studnet</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token class-name">Studnet</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>constructor <span class="token operator">=</span> Studnet<span class="token punctuation">;</span>
      <span class="token keyword">var</span> student <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Studnet</span><span class="token punctuation">(</span><span class="token number">1001</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul><li>或者使用Object.create(Person) 创建一个对象，该对象的原型为Person
<ul><li>即<code>obj.__proto__=Person.prototype</code></li></ul></li></ul> <h3 id="_47-jquery模拟实现"><a href="#_47-jquery模拟实现" class="header-anchor">#</a> 47. jQuery模拟实现</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> $<span class="token operator">=</span><span class="token punctuation">(</span><span class="token function-variable function">jQuery</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 返回jQuery原型</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

jQuery<span class="token punctuation">.</span>fn<span class="token operator">=</span>jQuery<span class="token punctuation">.</span>prototype<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token function-variable function">init</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      	<span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token comment">// 这个this即为jQuery.prototype  </span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">verson</span><span class="token operator">:</span><span class="token string">&quot;7.1&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">length</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token function-variable function">size</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length
    <span class="token punctuation">}</span>
    
<span class="token punctuation">}</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>version
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><ul><li>作用域污染问题
<ul><li>this.length=0 会使原型上的length=0</li></ul></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> $<span class="token operator">=</span><span class="token punctuation">(</span><span class="token function-variable function">jQuery</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 返回jQuery原型</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

jQuery<span class="token punctuation">.</span>fn<span class="token operator">=</span>jQuery<span class="token punctuation">.</span>prototype<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token function-variable function">init</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>length<span class="token operator">=</span><span class="token number">0</span> 
      	<span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token comment">// 这个this即为jQuery.prototype  </span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">verson</span><span class="token operator">:</span><span class="token string">&quot;7.1&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">length</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token function-variable function">size</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length
    <span class="token punctuation">}</span>
    
<span class="token punctuation">}</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>version
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><ul><li>解决，将init方法返回一个实例（实例的<code>__proto__</code>为原型），而不是原型</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> $<span class="token operator">=</span><span class="token punctuation">(</span><span class="token function-variable function">jQuery</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 返回jQuery原型</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

jQuery<span class="token punctuation">.</span>fn<span class="token operator">=</span>jQuery<span class="token punctuation">.</span>prototype<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token function-variable function">init</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>length<span class="token operator">=</span><span class="token number">0</span> 
      	<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">_size</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">verson</span><span class="token operator">:</span><span class="token string">&quot;7.1&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">length</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token function-variable function">size</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length
    <span class="token punctuation">}</span>
    
<span class="token punctuation">}</span>

<span class="token comment">// 原型链修改</span>
jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init<span class="token punctuation">.</span>prototype<span class="token operator">=</span>JQuery<span class="token punctuation">.</span>fn

<span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>version
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="_48-jquery实现选择器"><a href="#_48-jquery实现选择器" class="header-anchor">#</a> 48. jQuery实现选择器</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// selector 选择器</span>
<span class="token comment">// context 上下文</span>
<span class="token keyword">var</span> $<span class="token operator">=</span><span class="token punctuation">(</span><span class="token function-variable function">jQuery</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span>context</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 返回jQuery原型</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>


jQuery<span class="token punctuation">.</span>fn<span class="token operator">=</span>jQuery<span class="token punctuation">.</span>prototype<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token function-variable function">init</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span>context</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        
        <span class="token comment">// 设置默认值</span>
        selector<span class="token operator">=</span>selector<span class="token operator">||</span>document
        context<span class="token operator">=</span>context<span class="token operator">||</span>document
        <span class="token keyword">if</span><span class="token punctuation">(</span>selector<span class="token punctuation">.</span>nodeType<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 是DOM元素</span>
            <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span>selector
            <span class="token keyword">this</span><span class="token punctuation">.</span>length<span class="token operator">=</span><span class="token number">1</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token operator">=</span>selector
            <span class="token keyword">return</span> <span class="token keyword">this</span>
        <span class="token punctuation">}</span>
        
        
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> selector<span class="token operator">===</span><span class="token string">'string'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 字符串</span>
            <span class="token comment">// 这里应该使用正则表达式判断各种选择器</span>
            <span class="token comment">//如果选择器是一个字符串</span>
            <span class="token keyword">var</span> e <span class="token operator">=</span> context<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span>selector<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取指定名称的元素</span>
            <span class="token comment">//通过for循环将所有元素存储到当前的实例中</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> e<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              <span class="token keyword">this</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> e<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> e<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">//存储元素的个数</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>context <span class="token operator">=</span> context<span class="token punctuation">;</span> <span class="token comment">//保存上下文对象</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token comment">//返回当前的实例</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            
            <span class="token comment">// 空</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>context <span class="token operator">=</span> context<span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
       
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">verson</span><span class="token operator">:</span><span class="token string">&quot;7.1&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">length</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token function-variable function">size</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length
    <span class="token punctuation">}</span>
    
<span class="token punctuation">}</span>

<span class="token comment">// 原型链修改</span>
jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init<span class="token punctuation">.</span>prototype<span class="token operator">=</span>JQuery<span class="token punctuation">.</span>fn

<span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>version
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br></div></div><h3 id="_49-jquery实现html"><a href="#_49-jquery实现html" class="header-anchor">#</a> 49. jQuery实现html</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// selector 选择器</span>
<span class="token comment">// context 上下文</span>
<span class="token keyword">var</span> $<span class="token operator">=</span><span class="token punctuation">(</span><span class="token function-variable function">jQuery</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span>context</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 返回jQuery原型</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>


jQuery<span class="token punctuation">.</span>fn<span class="token operator">=</span>jQuery<span class="token punctuation">.</span>prototype<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token function-variable function">init</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span>context</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        
        <span class="token comment">// 设置默认值</span>
        selector<span class="token operator">=</span>selector<span class="token operator">||</span>document
        context<span class="token operator">=</span>context<span class="token operator">||</span>document
        <span class="token keyword">if</span><span class="token punctuation">(</span>selector<span class="token punctuation">.</span>nodeType<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 是DOM元素</span>
            <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span>selector
            <span class="token keyword">this</span><span class="token punctuation">.</span>length<span class="token operator">=</span><span class="token number">1</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token operator">=</span>selector
            <span class="token keyword">return</span> <span class="token keyword">this</span>
        <span class="token punctuation">}</span>
        
        
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> selector<span class="token operator">===</span><span class="token string">'string'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 字符串</span>
            <span class="token comment">// 这里应该使用正则表达式判断各种选择器</span>
            <span class="token comment">//如果选择器是一个字符串</span>
            <span class="token keyword">var</span> e <span class="token operator">=</span> context<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span>selector<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取指定名称的元素</span>
            <span class="token comment">//通过for循环将所有元素存储到当前的实例中</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> e<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              <span class="token keyword">this</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> e<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> e<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">//存储元素的个数</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>context <span class="token operator">=</span> context<span class="token punctuation">;</span> <span class="token comment">//保存上下文对象</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token comment">//返回当前的实例</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            
            <span class="token comment">// 空</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>context <span class="token operator">=</span> context<span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
       
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    
    <span class="token comment">// 原型上挂载方法</span>
    <span class="token function-variable function">html</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 是不是要把选择器选中的所有元素都添加同样的内容</span>
        jQuery<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>innerHtml<span class="token operator">=</span>val
        <span class="token punctuation">}</span><span class="token punctuation">,</span>val<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token literal-property property">verson</span><span class="token operator">:</span><span class="token string">&quot;7.1&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">length</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token function-variable function">size</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length
    <span class="token punctuation">}</span>
    
<span class="token punctuation">}</span>

<span class="token comment">// 实现隐式迭代html的方法</span>
jQuery<span class="token punctuation">.</span><span class="token function-variable function">each</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">object<span class="token punctuation">,</span>callback<span class="token punctuation">,</span>agrs</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>object<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>object<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>args<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> object
<span class="token punctuation">}</span>



<span class="token comment">// 原型链修改</span>
jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init<span class="token punctuation">.</span>prototype<span class="token operator">=</span>JQuery<span class="token punctuation">.</span>fn

<span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>version

<span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;h1&gt;666&lt;/h1&gt;&quot;</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br></div></div><h3 id="_50-jquery实现extend"><a href="#_50-jquery实现extend" class="header-anchor">#</a> 50 jQuery实现extend</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// selector 选择器</span>
<span class="token comment">// context 上下文</span>
<span class="token keyword">var</span> $<span class="token operator">=</span><span class="token punctuation">(</span><span class="token function-variable function">jQuery</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span>context</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 返回jQuery原型</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>


jQuery<span class="token punctuation">.</span>fn<span class="token operator">=</span>jQuery<span class="token punctuation">.</span>prototype<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token function-variable function">init</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span>context</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        
        <span class="token comment">// 设置默认值</span>
        selector<span class="token operator">=</span>selector<span class="token operator">||</span>document
        context<span class="token operator">=</span>context<span class="token operator">||</span>document
        <span class="token keyword">if</span><span class="token punctuation">(</span>selector<span class="token punctuation">.</span>nodeType<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 是DOM元素</span>
            <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span>selector
            <span class="token keyword">this</span><span class="token punctuation">.</span>length<span class="token operator">=</span><span class="token number">1</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token operator">=</span>selector
            <span class="token keyword">return</span> <span class="token keyword">this</span>
        <span class="token punctuation">}</span>
        
        
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> selector<span class="token operator">===</span><span class="token string">'string'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 字符串</span>
            <span class="token comment">// 这里应该使用正则表达式判断各种选择器</span>
            <span class="token comment">//如果选择器是一个字符串</span>
            <span class="token keyword">var</span> e <span class="token operator">=</span> context<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span>selector<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取指定名称的元素</span>
            <span class="token comment">//通过for循环将所有元素存储到当前的实例中</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> e<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              <span class="token keyword">this</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> e<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> e<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">//存储元素的个数</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>context <span class="token operator">=</span> context<span class="token punctuation">;</span> <span class="token comment">//保存上下文对象</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token comment">//返回当前的实例</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            
            <span class="token comment">// 空</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>context <span class="token operator">=</span> context<span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
       
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    
    <span class="token comment">// 原型上挂载方法</span>
    <span class="token function-variable function">html</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 是不是要把选择器选中的所有元素都添加同样的内容</span>
        jQuery<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>innerHtml<span class="token operator">=</span>val
        <span class="token punctuation">}</span><span class="token punctuation">,</span>val<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token literal-property property">verson</span><span class="token operator">:</span><span class="token string">&quot;7.1&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">length</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token function-variable function">size</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length
    <span class="token punctuation">}</span>
    
<span class="token punctuation">}</span>

<span class="token comment">// 实现隐式迭代html的方法</span>
jQuery<span class="token punctuation">.</span><span class="token function-variable function">each</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">object<span class="token punctuation">,</span>callback<span class="token punctuation">,</span>agrs</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>object<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>object<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>args<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> object
<span class="token punctuation">}</span>



<span class="token comment">// 原型链修改</span>
jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init<span class="token punctuation">.</span>prototype<span class="token operator">=</span>JQuery<span class="token punctuation">.</span>fn

<span class="token comment">// 在原型上添加扩展的方法</span>
jQuery<span class="token punctuation">.</span>extend<span class="token operator">=</span>jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function-variable function">extend</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> prop <span class="token keyword">in</span> obj<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token operator">=</span>obj<span class="token punctuation">[</span>prop<span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> <span class="token keyword">this</span>
<span class="token punctuation">}</span>

<span class="token comment">// 调用</span>
jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token function-variable function">text</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        jQuery<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>innerText<span class="token operator">=</span>val
        <span class="token punctuation">}</span><span class="token punctuation">,</span>val<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>version

<span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;h1&gt;666&lt;/h1&gt;&quot;</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br></div></div><h3 id="_51-extend-实现多个参数传递"><a href="#_51-extend-实现多个参数传递" class="header-anchor">#</a> 51. extend 实现多个参数传递</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// selector 选择器</span>
<span class="token comment">// context 上下文</span>
<span class="token keyword">var</span> $<span class="token operator">=</span><span class="token punctuation">(</span><span class="token function-variable function">jQuery</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span>context</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 返回jQuery原型</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>


jQuery<span class="token punctuation">.</span>fn<span class="token operator">=</span>jQuery<span class="token punctuation">.</span>prototype<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token function-variable function">init</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">selector<span class="token punctuation">,</span>context</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        
        <span class="token comment">// 设置默认值</span>
        selector<span class="token operator">=</span>selector<span class="token operator">||</span>document
        context<span class="token operator">=</span>context<span class="token operator">||</span>document
        <span class="token keyword">if</span><span class="token punctuation">(</span>selector<span class="token punctuation">.</span>nodeType<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 是DOM元素</span>
            <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span>selector
            <span class="token keyword">this</span><span class="token punctuation">.</span>length<span class="token operator">=</span><span class="token number">1</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token operator">=</span>selector
            <span class="token keyword">return</span> <span class="token keyword">this</span>
        <span class="token punctuation">}</span>
        
        
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> selector<span class="token operator">===</span><span class="token string">'string'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 字符串</span>
            <span class="token comment">// 这里应该使用正则表达式判断各种选择器</span>
            <span class="token comment">//如果选择器是一个字符串</span>
            <span class="token keyword">var</span> e <span class="token operator">=</span> context<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span>selector<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获取指定名称的元素</span>
            <span class="token comment">//通过for循环将所有元素存储到当前的实例中</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> e<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              <span class="token keyword">this</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> e<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> e<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">//存储元素的个数</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>context <span class="token operator">=</span> context<span class="token punctuation">;</span> <span class="token comment">//保存上下文对象</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token comment">//返回当前的实例</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            
            <span class="token comment">// 空</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>context <span class="token operator">=</span> context<span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
       
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    
    <span class="token comment">// 原型上挂载方法</span>
    <span class="token function-variable function">html</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 是不是要把选择器选中的所有元素都添加同样的内容</span>
        jQuery<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>innerHtml<span class="token operator">=</span>val
        <span class="token punctuation">}</span><span class="token punctuation">,</span>val<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token literal-property property">verson</span><span class="token operator">:</span><span class="token string">&quot;7.1&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">length</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token function-variable function">size</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length
    <span class="token punctuation">}</span>
    
<span class="token punctuation">}</span>

<span class="token comment">// 实现隐式迭代html的方法</span>
jQuery<span class="token punctuation">.</span><span class="token function-variable function">each</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">object<span class="token punctuation">,</span>callback<span class="token punctuation">,</span>agrs</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>object<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>object<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>args<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> object
<span class="token punctuation">}</span>



<span class="token comment">// 原型链修改</span>
jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init<span class="token punctuation">.</span>prototype<span class="token operator">=</span>JQuery<span class="token punctuation">.</span>fn

<span class="token comment">// 在原型上添加扩展的方法</span>
jQuery<span class="token punctuation">.</span>extend<span class="token operator">=</span>jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function-variable function">extend</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token comment">// 多个参数的处理</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> arguments<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">===</span><span class="token string">'string'</span><span class="token operator">&amp;&amp;</span><span class="token keyword">typeof</span> arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">===</span><span class="token string">'string'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
         <span class="token keyword">var</span> destination <span class="token operator">=</span> arguments<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          source <span class="token operator">=</span> arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token comment">//把第二个对象合并到第一个参数对象中，并返回合并后的对象</span>
          <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> property <span class="token keyword">in</span> source<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            destination<span class="token punctuation">[</span>property<span class="token punctuation">]</span> <span class="token operator">=</span> source<span class="token punctuation">[</span>property<span class="token punctuation">]</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
        
        <span class="token keyword">return</span> destination
        
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
         <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> prop <span class="token keyword">in</span> obj<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token operator">=</span>obj<span class="token punctuation">[</span>prop<span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> <span class="token keyword">this</span>
    <span class="token punctuation">}</span>
   
<span class="token punctuation">}</span>

<span class="token comment">// 调用</span>
jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token function-variable function">text</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        jQuery<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>innerText<span class="token operator">=</span>val
        <span class="token punctuation">}</span><span class="token punctuation">,</span>val<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 实现样式的修改</span>
jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token function-variable function">fontStyle</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">var</span> defaults <span class="token operator">=</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">&quot;#ccc&quot;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token string">&quot;16px&quot;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">;</span>
          <span class="token comment">//如果有参数，会覆盖掉默认的参数</span>
          defaults <span class="token operator">=</span> jQuery<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span>defaults<span class="token punctuation">,</span> obj <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token comment">//为每个DOM元素执设置样式.</span>
          jQuery<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> defaults<span class="token punctuation">.</span>color<span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> defaults<span class="token punctuation">.</span>size<span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>version

<span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string">&quot;&lt;h1&gt;666&lt;/h1&gt;&quot;</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br></div></div><h2 id="dom"><a href="#dom" class="header-anchor">#</a> DOM</h2> <h3 id="_52-选择器"><a href="#_52-选择器" class="header-anchor">#</a> 52. 选择器</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>h4<span class="token operator">&gt;</span>标题内容<span class="token operator">&lt;</span><span class="token operator">/</span>h4<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span>span标签内容<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>
        段落内容
        <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span>段落中的第一个span标签<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span>段落中的第二个span标签<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;p span&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 获取p标签中第一个span标签中的内容，所以输出结果为:段落中的第一个span标签</span>
       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;h4,span&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//获取第一个h4或者是span元素的内容：所以输出结果为：标题内容</span>
        <span class="token keyword">var</span> ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;p&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ele<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;div span&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//段落中的第一个span标签。</span>
      <span class="token comment">// 首先先找到`p`元素，然后看一下p元素下面有没有div,我们发现没有，但是依然能够匹配到span元素。</span>
      <span class="token comment">//原因是：在匹配的过程中会优先找出最外层div元素下的span元素的集合，然后在判断span元素是否属于p元素的子元素，最后返回</span>
      <span class="token comment">//第一个匹配到的span元素的值。</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h4 id="注意点"><a href="#注意点" class="header-anchor">#</a> 注意点</h4> <ul><li>CSS选择器是先从目标元素开始查询，然后再筛选出满足条件的元素，所有有些结果让我们难以理解</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;p&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ele<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;div span&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//段落中的第一个span标签。</span>
      <span class="token comment">// 首先先找到`p`元素，然后看一下p元素下面有没有div,我们发现没有，但是依然能够匹配到span元素。</span>
      <span class="token comment">//原因是：在匹配的过程中会优先找出最外层div元素下的span元素的集合，然后在判断span元素是否属于p元素的子元素，最后返回</span>
      <span class="token comment">//第一个匹配到的span元素的值。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_53-htmlcollection对象与nodelist对象"><a href="#_53-htmlcollection对象与nodelist对象" class="header-anchor">#</a> 53. HTMLCollection对象与NodeList对象</h3> <p><strong>HTMLCollection</strong></p> <ul><li>具有length对象</li> <li>可以通过item()和namedItem()函数访问特定元素</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;container&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;bar&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;foo&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;inner&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
 <span class="token keyword">var</span> main <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;container&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>children<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>main<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//HTMLCollection</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>main<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//输出:&lt;div class=&quot;bar&quot;&gt;&lt;/div&gt;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>main<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出:foo元素</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><ul><li>namedItem根据元素上的name值获取</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token operator">&lt;</span>form id<span class="token operator">=</span><span class="token string">&quot;form1&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;text&quot;</span> id<span class="token operator">=</span><span class="token string">&quot;userName&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;password&quot;</span> id<span class="token operator">=</span><span class="token string">&quot;password&quot;</span> name<span class="token operator">=</span><span class="token string">&quot;userPwd&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>form<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
 <span class="token keyword">var</span> form1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;form1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>children<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>form1<span class="token punctuation">.</span><span class="token function">namedItem</span><span class="token punctuation">(</span><span class="token string">&quot;userPwd&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//   &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;userPwd&quot; /&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><strong>NodeList</strong></p> <ul><li>具有length属性</li> <li>item方法</li></ul> <p><strong>相同点</strong></p> <ul><li>结构都是伪数组，转换为真正的数组</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>htmlCollection<span class="token operator">||</span>NodeList<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>不同点</strong></p> <ul><li>NodeList存储多种节点，文本，注释，元素节点</li> <li>而HTMLCollection只有元素节点</li> <li>children获取HTMLCollection</li> <li>childNodes获取NodeList</li></ul> <h3 id="_54-dom操作"><a href="#_54-dom操作" class="header-anchor">#</a> 54. DOM操作</h3> <ul><li>一些不常见的操作
<ul><li>创建属性：<code>createAttribute(&quot;type&quot;)</code></li> <li>设置属性节点：<code>newInput.setAttributeNode(newAttr);</code></li> <li>设置文本节点：<code>var newTextNode = document.createTextNode(&quot;用户密码&quot;); form1.appendChild(newTextNode); //添加文本节点</code></li></ul></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//创建一个input元素</span>
    <span class="token keyword">var</span> newInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;input&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//创建属性</span>
    <span class="token keyword">var</span> newAttr <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;type&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    newAttr<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">&quot;password&quot;</span><span class="token punctuation">;</span>
    <span class="token comment">//将属性绑定到元素上</span>
    newInput<span class="token punctuation">.</span><span class="token function">setAttributeNode</span><span class="token punctuation">(</span>newAttr<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">//创建一个文本节点</span>
    <span class="token keyword">var</span> newTextNode <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">&quot;用户密码&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    form1<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>newTextNode<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//添加文本节点</span>
    form1<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>newInput<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><ul><li>删除属性操作：<code>removeAttribute</code></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token operator">&lt;</span>form id<span class="token operator">=</span><span class="token string">&quot;form1&quot;</span><span class="token operator">&gt;</span>
      用户名<span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;text&quot;</span> id<span class="token operator">=</span><span class="token string">&quot;userName&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span> <span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span>
      用户密码<span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;password&quot;</span> id<span class="token operator">=</span><span class="token string">&quot;password&quot;</span> name<span class="token operator">=</span><span class="token string">&quot;userPwd&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>form<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
	 <span class="token keyword">var</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;#userName&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    input<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><strong>修改元素节点</strong></p> <ul><li>元素替换</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> father<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;#container&quot;</span><span class="token punctuation">)</span>

<span class="token comment">// 将father中的div标签替换为p标签</span>

<span class="token keyword">var</span> div<span class="token operator">=</span>father<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;div&quot;</span><span class="token punctuation">)</span>

<span class="token keyword">var</span> newP<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;p&quot;</span><span class="token punctuation">)</span>

<span class="token comment">// 元素节点替换</span>
father<span class="token punctuation">.</span><span class="token function">replaceChild</span><span class="token punctuation">(</span>newP<span class="token punctuation">,</span>div<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="_54-优化dom操作"><a href="#_54-优化dom操作" class="header-anchor">#</a> 54 优化dom操作</h3> <ul><li>使用文档碎片</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> ul<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;ul&quot;</span><span class="token punctuation">)</span>

<span class="token keyword">let</span> frag<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">createDocumentFragment</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span><span class="token number">100</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;li&quot;</span><span class="token punctuation">)</span>
    li<span class="token punctuation">.</span>innerHtml<span class="token operator">=</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">item{i}</span><span class="token template-punctuation string">`</span></span>
    
    <span class="token comment">// 插入到文档碎片</span>
    frag<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>li<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

ul<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>frag<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="_55-事件捕获阶段-目标阶段-冒泡阶段"><a href="#_55-事件捕获阶段-目标阶段-冒泡阶段" class="header-anchor">#</a> 55. 事件捕获阶段，目标阶段，冒泡阶段</h3> <p><strong>事件捕获</strong></p> <ul><li>从根节点开始，事件向内传播，直到目标节点</li></ul> <p><strong>事件冒泡</strong></p> <ul><li>从目标节点开始，事件向外传播，直到根节点</li></ul> <p><strong>设置事件的传播顺序</strong></p> <ul><li><p><code>xxx.addEventListen(&quot;click&quot;,function(){},true)</code>:事件以捕获方式传播</p></li> <li><p>第三个参数设置为flase，以冒泡方式传播，默认为false</p></li></ul> <p><strong>阻止事件的冒泡</strong></p> <ul><li>event.stopPropagation():只阻止事件冒泡</li> <li>event.stopImmediatePropagation()：不仅阻止事件冒泡，还阻止绑定在当前元素上的其他事件的执行</li></ul> <h3 id="_56-事件对象"><a href="#_56-事件对象" class="header-anchor">#</a> 56 事件对象</h3> <ul><li>形参 ：event</li> <li>window.event</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 兼容性处理</span>

<span class="token keyword">return</span> event<span class="token operator">||</span>window<span class="token punctuation">.</span>event
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="_57-触发事件的目标对象"><a href="#_57-触发事件的目标对象" class="header-anchor">#</a> 57 触发事件的目标对象</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// IE event.srcElement</span>
<span class="token comment">// 其他event.taget 或者 同时都可以</span>
<span class="token keyword">return</span> event<span class="token punctuation">.</span>target<span class="token operator">||</span>event<span class="token punctuation">.</span>srcElement
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="_58-事件模型"><a href="#_58-事件模型" class="header-anchor">#</a> 58 事件模型</h3> <p><strong>DOM0</strong></p> <ul><li>一个函数赋值一个事件处理函数</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>button onclick<span class="token operator">=</span><span class="token string">&quot;fn()&quot;</span><span class="token operator">&gt;</span>点击<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>

<span class="token comment">// 或者</span>
<span class="token keyword">let</span> btn<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;button&quot;</span><span class="token punctuation">)</span>
btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul><li>缺点，一个事件（如click触发时），只有一个事件处理函数有效,后绑定生效</li></ul> <p><strong>DOM2</strong></p> <ul><li>不同浏览器厂商制定的不同的事件绑定方式</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// IE 10以下</span>

<span class="token comment">// 绑定</span>
element<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">'on'</span><span class="token operator">+</span>eventName<span class="token punctuation">,</span>handler<span class="token punctuation">)</span>
<span class="token comment">// 取消绑定</span>
element<span class="token punctuation">.</span><span class="token function">detachEvent</span><span class="token punctuation">(</span><span class="token string">'on'</span><span class="token operator">+</span>eventName<span class="token punctuation">,</span>handler<span class="token punctuation">)</span>

<span class="token comment">// 其他浏览器或者IE10+</span>

<span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span>handler<span class="token punctuation">,</span>useCapture<span class="token punctuation">)</span> <span class="token comment">//添加事件处理程序</span>
<span class="token function">removeEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span>handler<span class="token punctuation">,</span>useCapture<span class="token punctuation">)</span> <span class="token comment">// 删除事件处理程序</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ul><li>特性：一个事件可以绑定多个事件处理函数
<ul><li>移除绑定时不能使用匿名函数，需要绑定和移除时传入相同的函数</li></ul></li> <li>addEventListen
<ul><li>多个事件处理函数顺序执行</li> <li>this指向绑定的元素</li></ul></li> <li>attachEventListen
<ul><li>多个事件处理函数倒序指向</li> <li>this指向window</li></ul></li></ul> <p><strong>浏览器兼容性处理</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> eventHandle<span class="token operator">=</span><span class="token punctuation">{</span>
    
    <span class="token function-variable function">addEventListener</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">ele<span class="token punctuation">,</span>type<span class="token punctuation">,</span>handler</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>ele<span class="token punctuation">.</span>addEventListener<span class="token punctuation">)</span><span class="token punctuation">{</span>
            ele<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span>handler<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>ele<span class="token punctuation">.</span>attachEvent<span class="token punctuation">)</span><span class="token punctuation">{</span>
            ele<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">&quot;on&quot;</span><span class="token operator">+</span>type<span class="token punctuation">,</span>handler<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            ele<span class="token punctuation">[</span><span class="token string">&quot;on&quot;</span><span class="token operator">+</span>type<span class="token punctuation">]</span><span class="token operator">=</span>handler
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p><strong>DOM3</strong></p> <ul><li>允许自定义事件</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>
<span class="token keyword">var</span> customeEvent

<span class="token comment">//立即执行函数，隔离作用域</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// 判断是否支持dom3事件模型</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>implemention<span class="token punctuation">.</span><span class="token function">hasFeature</span><span class="token punctuation">(</span><span class="token string">&quot;CustomEvents&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;3.0&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">let</span> user<span class="token operator">=</span><span class="token punctuation">{</span><span class="token literal-property property">userName</span><span class="token operator">:</span><span class="token string">&quot;zhangsan&quot;</span><span class="token punctuation">}</span>
        <span class="token comment">// 创建一个事件</span>
        customeEvent<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">createEvent</span><span class="token punctuation">(</span><span class="token string">&quot;CustomEvent&quot;</span><span class="token punctuation">)</span>
        
        <span class="token comment">// 初始化一个事件，事件名，是否冒泡，是否可以被取消，e.detail绑定值</span>
        customeEvent<span class="token punctuation">.</span><span class="token function">initCustomEvent</span><span class="token punctuation">(</span><span class="token string">&quot;myEvent&quot;</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token boolean">false</span><span class="token punctuation">,</span>user<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>


<span class="token comment">// div盒子监听自定义事件</span>
div<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;myEvent&quot;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// 初始化时user对象的属性被写入e.detail中</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>userName<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 一个按钮实现自定义事件的触发</span>
btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    div<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span>customeEvent<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h3 id="_59-事件委托"><a href="#_59-事件委托" class="header-anchor">#</a> 59  事件委托</h3> <ul><li>基于事件冒泡的机制，将本应注册到子元素的事件处理函数注册到父元素上
<ul><li>父元素对子元素的触发进行统一处理</li></ul></li></ul> <h3 id="_60-浏览器的重绘和重排"><a href="#_60-浏览器的重绘和重排" class="header-anchor">#</a> 60 浏览器的重绘和重排</h3> <p><strong>浏览器渲染HTML的过程</strong></p> <ul><li>HTML代码被解析成DOM树，CSS代码被解析成样式规则集</li> <li>DOM树和样式规则集合并形成渲染树</li> <li>根据渲染树进行节点的属性计算，如位置，大小，颜色</li> <li>进行节点的渲染</li></ul> <p><strong>重排</strong></p> <ul><li>更改页面布局的一种操作</li></ul> <p><strong>重排的发生场景</strong></p> <ul><li>第一次渲染</li> <li>浏览器窗口大小变化</li> <li>元素的大小改变，影响周围</li> <li>元素的增删</li></ul> <p><strong>重排的发生机制</strong></p> <ul><li><p>浏览器维护一个重排队列，里面存放一定量引起重排操作的样式改变，到达一定程度后统一进行一次重排</p></li> <li><p>强制重排的情况</p> <ul><li>获取元素的样式</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>clicent系列
offset系列
scroll系列
width<span class="token punctuation">,</span>height
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></li></ul> <p><strong>重绘</strong></p> <ul><li>改变元素在页面中的显示样式</li></ul> <p><strong>重绘与冲重排的关系</strong></p> <ul><li>重排一定引发重绘，而重绘不一定引发重排</li></ul> <p><strong>减少重绘和重排的操作</strong></p> <ul><li>统一添加样式，添加类</li> <li>少使用table布局，多次引发重排</li> <li>对一个元素需要进行复杂的样式添加时，先隐藏改元素，添加号后在显示</li> <li>文档碎片</li> <li>事件委派</li></ul> <h2 id="ajax"><a href="#ajax" class="header-anchor">#</a> AJAX</h2> <h3 id="_61-ajax的基本使用"><a href="#_61-ajax的基本使用" class="header-anchor">#</a> 61 AJAX的基本使用</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>
<span class="token comment">// 兼容性处理</span>
<span class="token keyword">let</span> xhr<span class="token operator">=</span><span class="token keyword">null</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>XMLHttpRequest<span class="token punctuation">)</span><span class="token punctuation">{</span>
    xhr<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
    xhr<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">ActiveXObject</span><span class="token punctuation">(</span><span class="token string">&quot;Microsoft.XMLHTTP&quot;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>


<span class="token comment">// 开始发起请求</span>
<span class="token comment">// 第三个参数为是否为异步</span>
xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">&quot;post&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;xxx.url&quot;</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span>

<span class="token comment">// post请求需要设置请求头</span>
xhr<span class="token punctuation">.</span><span class="token function">setRequestHeader</span><span class="token punctuation">(</span><span class="token string">&quot;Content-type&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;application/x-www-form-urlencoded&quot;</span><span class="token punctuation">)</span>

xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">&quot;name=zs&amp;age=18&quot;</span><span class="token punctuation">)</span>


<span class="token comment">// 监听结果</span>
xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token keyword">if</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState<span class="token operator">===</span><span class="token number">4</span><span class="token operator">&amp;&amp;</span>xhr<span class="token punctuation">.</span>status<span class="token operator">===</span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// readyState</span>
<span class="token comment">// 0 初始化，未发送</span>
<span class="token comment">// 1 open 未send</span>
<span class="token comment">// 2 send 未响应</span>
<span class="token comment">// 3.接收，响应部分</span>
<span class="token comment">// 4.完成</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><h3 id="_62-ajax的优缺点"><a href="#_62-ajax的优缺点" class="header-anchor">#</a> 62. AJAX的优缺点</h3> <p><strong>优点</strong></p> <ul><li>异步，无刷新请求</li> <li>前后端分离</li></ul> <p><strong>缺点</strong></p> <ul><li>不利于SEO，页面内容JavaScript动态生成</li> <li>破环了统一资源定位符的效果
<ul><li>相同的url地址，不同的人看到的效果不同</li></ul></li></ul> <h3 id="_63-get和post请求"><a href="#_63-get和post请求" class="header-anchor">#</a> 63. get和post请求</h3> <p><strong>get</strong></p> <ul><li>请求参数在地址栏</li> <li>参数的大小有限制</li></ul> <p><strong>post</strong></p> <ul><li>传输大数据</li> <li>参数在请求体，不在地址栏</li></ul> <h3 id="_64-浏览器的同源策略"><a href="#_64-浏览器的同源策略" class="header-anchor">#</a> 64. 浏览器的同源策略</h3> <ul><li><p>禁止不同页面的dom操作</p> <ul><li>防止iframe跨域，恶意网站嵌套正规网站，恶意网站操作正规网站的dom，获取用户信息</li></ul></li> <li><p>禁止XHR实现不同源的页面请求</p> <ul><li>CSRF攻击：跨站请求伪造
<ul><li>恶意网站发起请求时，获取浏览器上存储的cookie，用这个cookie来去请求正规网站，正规网站返回信息被恶意利用</li></ul></li></ul></li></ul> <h3 id="_65-跨域"><a href="#_65-跨域" class="header-anchor">#</a> 65 跨域</h3> <ul><li>cors跨域</li> <li>jsonp跨域
<ul><li>只支持get请求</li> <li>在url的参数中添加回调函数，返回的结果为回调函数的执行</li></ul></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 前端</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>html lang<span class="token operator">=</span><span class="token string">&quot;en&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>meta charset<span class="token operator">=</span><span class="token string">&quot;UTF-8&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>meta http<span class="token operator">-</span>equiv<span class="token operator">=</span><span class="token string">&quot;X-UA-Compatible&quot;</span> content<span class="token operator">=</span><span class="token string">&quot;IE=edge&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>meta name<span class="token operator">=</span><span class="token string">&quot;viewport&quot;</span> content<span class="token operator">=</span><span class="token string">&quot;width=device-width, initial-scale=1.0&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>title<span class="token operator">&gt;</span>Document<span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
      window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btnLogin&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token function">sendRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token keyword">function</span> <span class="token function">sendRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> userName <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;userName&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>
        <span class="token comment">//请求参数，其中包含回调函数</span>
        <span class="token keyword">var</span> param <span class="token operator">=</span> <span class="token string">&quot;name=&quot;</span> <span class="token operator">+</span> userName <span class="token operator">+</span> <span class="token string">&quot;&amp;callback=successFn&quot;</span><span class="token punctuation">;</span>
        <span class="token comment">//请求的url</span>
        <span class="token keyword">var</span> url <span class="token operator">=</span> <span class="token string">&quot;http://localhost:3000/getUserNameInfo?&quot;</span> <span class="token operator">+</span> param<span class="token punctuation">;</span>
        <span class="token keyword">var</span> script <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;script&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        script<span class="token punctuation">.</span>src <span class="token operator">=</span> url<span class="token punctuation">;</span>
        document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>script<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">function</span> <span class="token function">successFn</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;result=&quot;</span><span class="token punctuation">,</span> result<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>
    <span class="token literal-property property">用户名</span><span class="token operator">:</span><span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;text&quot;</span> id<span class="token operator">=</span><span class="token string">&quot;userName&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span> <span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>button id<span class="token operator">=</span><span class="token string">&quot;btnLogin&quot;</span><span class="token operator">&gt;</span>登录<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><ul><li>后端</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// app.all('*', function (req, res) {</span>
<span class="token comment">//     //设置可以接收请求的域名</span>
<span class="token comment">//     res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');</span>
<span class="token comment">//     res.header('Access-Control-Allow-Methods', 'GET, POST,PUT');</span>
<span class="token comment">//     res.header('Access-Control-Allow-Headers', 'Content-Type');</span>
<span class="token comment">//     res.header('Content-Type', 'application/json;charset=utf-8');</span>
<span class="token comment">//     req.next();</span>
<span class="token comment">// })</span>
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/getUserNameInfo'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> userName <span class="token operator">=</span> req<span class="token punctuation">.</span>query<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
    <span class="token comment">//获取请求的回调函数</span>
    <span class="token keyword">var</span> callbackFn <span class="token operator">=</span> req<span class="token punctuation">.</span>query<span class="token punctuation">.</span>callback
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'callbackFn=='</span><span class="token punctuation">,</span>callbackFn<span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'userName='</span><span class="token punctuation">,</span>userName<span class="token punctuation">)</span>
    <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">10001</span><span class="token punctuation">,</span>
        <span class="token literal-property property">userName</span><span class="token operator">:</span> userName<span class="token punctuation">,</span>
        <span class="token literal-property property">userAge</span><span class="token operator">:</span><span class="token number">21</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
    res<span class="token punctuation">.</span><span class="token function">writeHead</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string-property property">'Content-type'</span><span class="token operator">:</span> <span class="token string">'application/json'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">//返回值是对对回调函数的调用</span>
    res<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>callbackFn<span class="token operator">+</span><span class="token string">'('</span><span class="token operator">+</span>data<span class="token operator">+</span><span class="token string">')'</span><span class="token punctuation">)</span>
    <span class="token comment">// res.write(data);</span>
    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'服务端启动....'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><h2 id="es6"><a href="#es6" class="header-anchor">#</a> ES6</h2> <h3 id="_66-let-与-var"><a href="#_66-let-与-var" class="header-anchor">#</a> 66 . let 与 var</h3> <p><strong>let</strong></p> <ul><li>不存在变量提升</li> <li>块级作用域（大括号包裹的代码块）</li></ul> <p><strong>var</strong></p> <ul><li>存在变量提升</li> <li>只有全局作用域和函数作用域</li></ul> <p><strong>var引发的问题</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> temp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">function</span> <span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;temp=&quot;</span><span class="token punctuation">,</span> temp<span class="token punctuation">)</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">var</span> temp <span class="token operator">=</span> <span class="token string">&quot;hello world&quot;</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul><li>输出undefined，temp变量提升导致
<ul><li>if(false) 里面是块级作用域，而var不认识这个</li></ul></li></ul> <h3 id="_67-块级作用域"><a href="#_67-块级作用域" class="header-anchor">#</a> 67. 块级作用域</h3> <ul><li>直接使用块级作用域</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
    <span class="token keyword">let</span> temp<span class="token operator">=</span><span class="token string">'xxx'</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>temp<span class="token punctuation">)</span>
<span class="token punctuation">}</span>


</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ul><li>之前使用立即执行函数创建独立(私有空间)</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> temp<span class="token operator">=</span><span class="token string">'xxx'</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>temp<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li>循环打印</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'i='</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>立即执行函数</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          
          		<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                     <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'i='</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
               
        <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="_68-let暂时性死区"><a href="#_68-let暂时性死区" class="header-anchor">#</a> 68. let暂时性死区</h3> <ul><li>在区域内存在let声明，通过let声明的变量一开始就形成了一个封闭的作用域，在声明之前访问变量都是不被允许的</li></ul> <p><strong>产生原因</strong></p> <ul><li>let不存在变量提升</li></ul> <h3 id="_68-let-不允许重复声明"><a href="#_68-let-不允许重复声明" class="header-anchor">#</a> 68. let 不允许重复声明</h3> <ul><li>错误示例</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token number">12</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">12</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_69-const"><a href="#_69-const" class="header-anchor">#</a> 69. const</h3> <ul><li><p>声明常量</p></li> <li><p>不存在变量提升</p></li> <li><p>块级作用域有效</p></li> <li><p>暂时性死区</p></li> <li><p>不允许重复声明</p></li></ul> <h3 id="_70-解构赋值"><a href="#_70-解构赋值" class="header-anchor">#</a> 70. 解构赋值</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'zs'</span><span class="token punctuation">,</span>
                <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">6</span>
        <span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                userName<span class="token punctuation">,</span>
                age
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">[</span>num1<span class="token punctuation">,</span> num2<span class="token punctuation">]</span><span class="token punctuation">,</span> num3
        <span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>userName<span class="token punctuation">,</span> age<span class="token punctuation">,</span> num1<span class="token punctuation">,</span> num2<span class="token punctuation">,</span> num3<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><strong>解构不成功，返回undefined</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>        <span class="token keyword">let</span> <span class="token punctuation">[</span>num1<span class="token punctuation">,</span> num2<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">]</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num1<span class="token punctuation">,</span> num2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// num2=undefined</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>不完全解构</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>        <span class="token comment">// 如果只取第一个值呢？</span>
       <span class="token keyword">let</span> <span class="token punctuation">[</span>num1<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
	  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//1 </span>


        <span class="token comment">//只取第二个值呢？</span>
        <span class="token keyword">let</span> <span class="token punctuation">[</span><span class="token punctuation">,</span> num<span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//2</span>

        <span class="token comment">// 只取第三个值呢？</span>
        <span class="token keyword">let</span> <span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token punctuation">,</span> num<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//3</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="_71-对象解构赋值"><a href="#_71-对象解构赋值" class="header-anchor">#</a> 71. 对象解构赋值</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token keyword">let</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">userName</span><span class="token operator">:</span> name<span class="token punctuation">,</span>
            <span class="token literal-property property">userAge</span><span class="token operator">:</span> age
        <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'ls'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">userAge</span><span class="token operator">:</span> <span class="token number">20</span>
        <span class="token punctuation">}</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> age<span class="token punctuation">)</span><span class="token punctuation">;</span>


<span class="token comment">// 将userName和userAge解构出来，并重命名为name和age</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p><strong>默认解构</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> obj<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token literal-property property">username</span><span class="token operator">:</span><span class="token string">'zhangsan'</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> <span class="token punctuation">{</span>name<span class="token punctuation">,</span>age<span class="token operator">=</span><span class="token number">20</span><span class="token punctuation">}</span><span class="token operator">=</span>obj

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span>age<span class="token punctuation">)</span>

<span class="token comment">// age本来应该是undefined，但是赋值了默认值，所有age=20</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h4 id="嵌套结构对象的解构"><a href="#嵌套结构对象的解构" class="header-anchor">#</a> 嵌套结构对象的解构</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> obj<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token literal-property property">arr</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">&quot;hello&quot;</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
        <span class="token literal-property property">msg</span><span class="token operator">:</span><span class="token string">'world'</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// arr并不是一个变量，只是一个标志</span>
<span class="token keyword">let</span> <span class="token punctuation">{</span><span class="token literal-property property">arr</span><span class="token operator">:</span><span class="token punctuation">[</span>str<span class="token punctuation">,</span><span class="token punctuation">{</span>
    msg
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">=</span>obj

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">,</span>msg<span class="token punctuation">)</span>

<span class="token comment">// 再看一个案例</span>

   <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">local</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">start</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">30</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">local</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">start</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                    x<span class="token punctuation">,</span>
                    y
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span> <span class="token operator">=</span> obj<span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><p><strong>字符串的解构赋值</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span>b<span class="token punctuation">,</span>c<span class="token punctuation">,</span>d<span class="token punctuation">,</span>e<span class="token punctuation">,</span>f<span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">'itcast'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span>b<span class="token punctuation">,</span>c<span class="token punctuation">,</span>d<span class="token punctuation">,</span>e<span class="token punctuation">,</span>f<span class="token punctuation">)</span>

<span class="token comment">// 解构length属性</span>
<span class="token keyword">let</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">length</span><span class="token operator">:</span>len
<span class="token punctuation">}</span><span class="token operator">=</span><span class="token string">'itcast'</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'len'</span><span class="token punctuation">,</span>len<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><strong>函数参数的解构</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>x<span class="token punctuation">,</span>y<span class="token punctuation">]</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> x<span class="token operator">+</span>y
<span class="token punctuation">}</span>

<span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_72-解构赋值的好处"><a href="#_72-解构赋值的好处" class="header-anchor">#</a> 72. 解构赋值的好处</h3> <p><strong>交换变量的值</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> num1<span class="token operator">=</span><span class="token number">3</span>
<span class="token keyword">let</span> num2<span class="token operator">=</span><span class="token number">4</span>
<span class="token punctuation">[</span>num1<span class="token punctuation">,</span>num2<span class="token punctuation">]</span><span class="token operator">=</span><span class="token punctuation">[</span>num2<span class="token punctuation">,</span>num1<span class="token punctuation">]</span>


</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>函数可以返回多个值</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span>b<span class="token punctuation">,</span>c<span class="token punctuation">]</span><span class="token operator">=</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span>b<span class="token punctuation">,</span>c<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><strong>函数返回对象</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">num1</span><span class="token operator">:</span><span class="token number">3</span><span class="token punctuation">,</span>
        <span class="token literal-property property">num2</span><span class="token operator">:</span><span class="token number">4</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> <span class="token punctuation">{</span><span class="token literal-property property">num1</span><span class="token operator">:</span>res1<span class="token punctuation">,</span><span class="token literal-property property">num2</span><span class="token operator">:</span>res2<span class="token punctuation">}</span><span class="token operator">=</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="_73-扩展运算符-将数组分离成一个个参数"><a href="#_73-扩展运算符-将数组分离成一个个参数" class="header-anchor">#</a> 73. 扩展运算符(将数组分离成一个个参数)</h3> <ul><li>...arr</li></ul> <p><strong>数组合并</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr1<span class="token operator">=</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span>
<span class="token keyword">let</span> arr2<span class="token operator">=</span><span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">]</span>

<span class="token keyword">let</span> newArr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>arr1<span class="token punctuation">,</span>arr2<span class="token punctuation">)</span>

<span class="token comment">// 使用扩展运算符</span>
<span class="token keyword">let</span> newArr2<span class="token operator">=</span><span class="token punctuation">[</span><span class="token operator">...</span>arr1<span class="token punctuation">,</span><span class="token operator">...</span>arr2<span class="token punctuation">]</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><strong>代替apply方法</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 调用Math.max方法是，需要传递的参数为一个列表</span>
<span class="token comment">// 通过apply使传递的参数变成一个数组</span>
<span class="token keyword">let</span> arr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">87</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">]</span>
Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span>arr<span class="token punctuation">)</span>

<span class="token comment">// 可以直接使用展开运算符</span>
Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="_73-rest运算符-将剩余参数组合成数组"><a href="#_73-rest运算符-将剩余参数组合成数组" class="header-anchor">#</a> 73- rest运算符(将剩余参数组合成数组)</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>   <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 5</span>
        <span class="token punctuation">}</span>
        <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="切割变量"><a href="#切割变量" class="header-anchor">#</a> 切割变量</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">]</span>

<span class="token keyword">const</span> <span class="token punctuation">[</span>num1<span class="token punctuation">,</span><span class="token operator">...</span>arr1<span class="token punctuation">]</span><span class="token operator">=</span>arr

<span class="token comment">// num1  1</span>
<span class="token comment">// arr1 [2,3,4,5,6]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>代替arguments</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>values</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token comment">// 直接调用数组的方法</span>
    values<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 之前的arguments参数</span>
<span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="_74-扩展运算符和剩余运算符的区分"><a href="#_74-扩展运算符和剩余运算符的区分" class="header-anchor">#</a> 74. 扩展运算符和剩余运算符的区分</h3> <p><strong>扩展运算符</strong></p> <ul><li>将数组分离成一个个变量</li> <li>出现在实参和赋值操作的右边</li></ul> <p><strong>剩余运算符</strong></p> <ul><li>将一个个变量组合成一个数组</li> <li>出现在形参和赋值操作的左边</li></ul> <h3 id="_75-箭头函数"><a href="#_75-箭头函数" class="header-anchor">#</a> 75. 箭头函数</h3> <p><strong>直接返回对象</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> <span class="token function-variable function">f</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">a</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">b</span><span class="token operator">:</span><span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>this指向问题</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 箭头函数没有自己的this指向</span>

<span class="token comment">// 那其中的this指向哪里呢?</span>
<span class="token comment">// 1. 找到箭头函数定义的位置,当前作用域</span>
<span class="token comment">// 2. 定义位置的上一层作用域的上下文(this) 即为this指向</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>一个案例</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>        <span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'wangwu'</span><span class="token punctuation">,</span>
            <span class="token function">getUserName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>userName<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        person<span class="token punctuation">.</span><span class="token function">getUserName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li><p>那么在我们这个案例中，<code>setTimeout</code>函数中使用了箭头函数，箭头函数中用了<code>this,</code>而这时<code>this</code>指的是外层代码块也就是<code>person</code> ,所以箭头函数中使用的this指的就是<code>person</code>(包含箭头函数最近的函数是<code>setTimeout</code>,那么包含<code>setTimeout</code>这个函数的最近的函数或者是对象是谁呢？对了，是<code>getUserName</code>这个函数，而<code>getUserName</code>这个函数是属于哪个对象呢？是<code>person</code>,所以<code>this</code>为<code>person</code>)</p></li> <li><div class="language-js line-numbers-mode"><pre class="language-js"><code>    <span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'zhangsan'</span><span class="token punctuation">,</span>
        <span class="token function">getUserName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>userName<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    person<span class="token punctuation">.</span><span class="token function">getUserName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// zhangsan</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div></li></ul> <p><strong>箭头函数的特性</strong></p> <ul><li><p>不能使用call,apply,bind改变this指向</p> <ul><li>为什么:其实就是把这个箭头函数赋值给新的this指向,this中就有一个对象使这个箭头函数,而箭头函数中查找this又去当前对象的父亲哪里找,就没有达到修改this的目的</li></ul></li> <li><p>不能使用new操作符</p> <ul><li>还是this的问题</li></ul></li> <li><p>没有自己的<code>prototype属性</code></p></li> <li><p>原型上的函数(prototype.methodxxx)不要写成箭头函数</p> <ul><li>还是this问题</li></ul></li></ul> <h3 id="_76-es6中属性和方法的简写"><a href="#_76-es6中属性和方法的简写" class="header-anchor">#</a> 76. ES6中属性和方法的简写</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>        <span class="token keyword">let</span> userName <span class="token operator">=</span> <span class="token string">'zhangsan'</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> userAge <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
            <span class="token comment">// userName:userName</span>
            <span class="token comment">// userAge:userAge</span>
            userName<span class="token punctuation">,</span>
            userAge<span class="token punctuation">,</span>
            
            <span class="token comment">// 原本</span>
            <span class="token comment">// sayHello:function(){}</span>
            <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        person<span class="token punctuation">.</span><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="_77-浅拷贝"><a href="#_77-浅拷贝" class="header-anchor">#</a> 77 浅拷贝</h3> <ul><li>Object.assign(target,src1,src2....)</li></ul> <p><strong>属性同名后面覆盖前面</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>不可枚举的属性无法拷贝</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> obj1<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">let</span> obj2<span class="token operator">=</span><span class="token punctuation">{</span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">}</span>

Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj2<span class="token punctuation">,</span><span class="token string">&quot;c&quot;</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token literal-property property">enumerable</span><span class="token operator">:</span><span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_78-symbol"><a href="#_78-symbol" class="header-anchor">#</a> 78 Symbol</h3> <ul><li>为了防止命名冲突的问题</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> s<span class="token operator">=</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> s2<span class="token operator">=</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token comment">// Symbol()</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s2<span class="token punctuation">)</span> <span class="token comment">// Symbol()</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>传入字符串来表示区别不同的Symbol</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> s<span class="token operator">=</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'s'</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> s2<span class="token operator">=</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'s2'</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token comment">// Symbol('s')</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s2<span class="token punctuation">)</span> <span class="token comment">// Symbol('s2')</span>

<span class="token comment">// 唯一标识</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'s'</span><span class="token punctuation">)</span><span class="token operator">===</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'s'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul><li>symbol作为属性名</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> s<span class="token operator">=</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">&quot;s&quot;</span><span class="token punctuation">)</span>

<span class="token keyword">let</span> obj<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token comment">// 2</span>
    <span class="token punctuation">[</span>s<span class="token punctuation">]</span><span class="token operator">:</span><span class="token string">&quot;hello&quot;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 1</span>
obj<span class="token punctuation">[</span>s<span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">&quot;hello&quot;</span>

<span class="token comment">//3</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span>s<span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token comment">// 属性</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><ul><li>防止属性名覆盖</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>        <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'zs'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">let</span> mySymbol <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'lib1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">function</span> <span class="token function">test1</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            obj<span class="token punctuation">[</span>mySymbol<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">42</span><span class="token punctuation">;</span>

        <span class="token punctuation">}</span>
        <span class="token keyword">let</span> mySymbol2 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'lib2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">function</span> <span class="token function">test2</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            obj<span class="token punctuation">[</span>mySymbol2<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">369</span><span class="token punctuation">;</span>

        <span class="token punctuation">}</span>
        <span class="token function">test1</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">test2</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="_79-proxy"><a href="#_79-proxy" class="header-anchor">#</a> 79. Proxy</h3> <ul><li>对象前面的拦截层(代理),在对莫格对象进行访问或者处理时,先经过这个拦截层,代理这次操作</li></ul> <p><strong>Proxy语法</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> proxy<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span>handler<span class="token punctuation">)</span>

<span class="token comment">// target 要进行拦截的对象</span>
<span class="token comment">// handler 拦截的处理对象</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>get拦截(拦截对get)</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> student<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token literal-property property">userName</span><span class="token operator">:</span><span class="token string">'张三'</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> proxy<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>student<span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token comment">// target,目标对象</span>
    <span class="token comment">// property 对象的属性</span>
    <span class="token function-variable function">get</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">target<span class="token punctuation">,</span>property</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 对属性进行判断,看是否存在</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>property <span class="token keyword">in</span> target<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> target<span class="token punctuation">[</span>property<span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&quot;属性不存在&quot;</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 访问属性(注意是proxy,而不是student)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>proxy<span class="token punctuation">.</span>userName<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>proxy<span class="token punctuation">.</span>userAge<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p><strong>set拦截</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> student<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'zs'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">18</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> proxy<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>student<span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token comment">// target 目标对象</span>
    <span class="token comment">// prop:属性名</span>
    <span class="token comment">// value:属性值</span>
    <span class="token function-variable function">set</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">target<span class="token punctuation">,</span>prop<span class="token punctuation">,</span>value</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 对要设置的值进行合法性的校验</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>prop<span class="token operator">===</span><span class="token string">'age'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>Number<span class="token punctuation">.</span><span class="token function">isInteger</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">TypeError</span><span class="token punctuation">(</span><span class="token string">'年龄不是整数'</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
            
            <span class="token keyword">if</span><span class="token punctuation">(</span>value<span class="token operator">&gt;</span><span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">RangeError</span><span class="token punctuation">(</span><span class="token string">'年龄太大了'</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 访问属性(注意是proxy,而不是student)</span>
proxy<span class="token punctuation">.</span>age<span class="token operator">=</span><span class="token string">'80'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>proxy<span class="token punctuation">.</span>age<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h4 id="应用场景1-值的校验"><a href="#应用场景1-值的校验" class="header-anchor">#</a> 应用场景1---值的校验</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Person</span><span class="token punctuation">{</span>
    
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">=</span><span class="token string">''</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>age<span class="token operator">=</span><span class="token number">19</span>
        <span class="token comment">// 返回的是一个代理对象</span>
        <span class="token keyword">return</span> <span class="token function">validator</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span>personValidators<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// 校验规则器</span>
<span class="token keyword">const</span> personValidators<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token function">name</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">typeof</span> val<span class="token operator">===</span><span class="token string">'string'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    
    <span class="token function">age</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">typeof</span> val<span class="token operator">===</span><span class="token string">'number'</span><span class="token operator">&amp;&amp;</span>val<span class="token operator">&gt;</span><span class="token number">18</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


<span class="token comment">// 实现代理的处理函数handler</span>
<span class="token keyword">function</span> <span class="token function">validator</span><span class="token punctuation">(</span><span class="token parameter">target<span class="token punctuation">,</span>validator</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// target 为实例对象</span>
    <span class="token comment">// validator 校验器</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span><span class="token punctuation">{</span>
        <span class="token literal-property property">_validator</span><span class="token operator">:</span>validator<span class="token punctuation">,</span>
        
        <span class="token comment">// 拦截赋值操作</span>
        <span class="token comment">// target 实例对象</span>
        <span class="token comment">// key 属性</span>
        <span class="token comment">// value 值</span>
        <span class="token function">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span>key<span class="token punctuation">,</span>value<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 判断修改的值是否在对象中</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>target<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">let</span> vFn<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>_validator<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
                <span class="token comment">// 进行校验</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">vFn</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token comment">//  通过</span>
                    <span class="token keyword">return</span> Reflect<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span>key<span class="token punctuation">,</span>value<span class="token punctuation">)</span>
                <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
                    
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br></div></div><h4 id="应用场景2-vue3响应式原理"><a href="#应用场景2-vue3响应式原理" class="header-anchor">#</a> 应用场景2-vue3响应式原理</h4> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token comment">// 获取输入框和p标签dom</span>
    <span class="token keyword">let</span> input<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;#input&quot;</span><span class="token punctuation">)</span>
    <span class="token keyword">let</span> p<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;#p&quot;</span><span class="token punctuation">)</span>
    
    <span class="token comment">// 定义一个响应式的对象,即proxy对象</span>
    <span class="token keyword">let</span> obj<span class="token operator">=</span><span class="token punctuation">{</span>
        <span class="token literal-property property">text</span><span class="token operator">:</span><span class="token string">''</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">let</span> proxyObj<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span><span class="token punctuation">{</span>
        <span class="token function">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span>key<span class="token punctuation">,</span>value<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">// 判断属性是否存储</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>target<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token comment">// 存在,数据驱动视图</span>
                input<span class="token punctuation">.</span>value<span class="token operator">=</span>value
                p<span class="token punctuation">.</span>innerHtml<span class="token operator">=</span>value
            <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
                <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&quot;属性不存在&quot;</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    
    <span class="token comment">// input的键盘事件也触发数据驱动视图</span>
    
    input<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;keyup&quot;</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        newObj<span class="token punctuation">.</span>text<span class="token operator">=</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    
    
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><h4 id="应用场景-实现私有属性"><a href="#应用场景-实现私有属性" class="header-anchor">#</a> 应用场景-实现私有属性</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> obj<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token literal-property property">_id</span><span class="token operator">:</span><span class="token number">555</span><span class="token punctuation">,</span>
    
    <span class="token comment">// 提供对外的get和set方法</span>
    
    <span class="token function">getUserId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_id
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    
    <span class="token function">setUserId</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>_id<span class="token operator">=</span>val        
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// 使用proxy代理实现变量私有,不允许直接修改和获取</span>

<span class="token keyword">let</span> proxyObj<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span><span class="token punctuation">{</span>
    
    <span class="token function">get</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span>key<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 判断读取的属性是否在target,并且不是下划线开头</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>target<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token operator">&amp;&amp;</span>key<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">!==</span><span class="token string">'_'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> target<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token keyword">undefined</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    
    <span class="token function">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span>key<span class="token punctuation">,</span>value<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 赋值时保证属性存在,且不是下划线开头</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>target<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token operator">&amp;&amp;</span>key<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">!==</span><span class="token string">'_'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            target<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token operator">=</span>value
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br></div></div><h3 id="_80-set"><a href="#_80-set" class="header-anchor">#</a> 80 set</h3> <ul><li><p>长度: <code>new Set().size</code></p></li> <li><p>转换为数组<code>Array.from(new Set())</code></p></li> <li><p>数组到set<code>new Set(arr)</code></p></li></ul></div></div>  <div class="page-edit"><div class="edit-link"><a href="https://github.com/linxin1123/vuepress-blog/edit/master/docs/08.面试/03.黑马面试/02.JavaScript-cnblog.md" target="_blank" rel="noopener noreferrer">编辑</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/03/10, 22:36:48</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/63837c/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">第一阶段-cnblog</div></a> <a href="/pages/c9e154/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">JavaScript(二)-cnblog</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/63837c/" class="prev">第一阶段-cnblog</a></span> <span class="next"><a href="/pages/c9e154/">JavaScript(二)-cnblog</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/0b785d/"><div>
            Vuex
            <!----></div></a> <span class="date">03-14</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/c59cc0/"><div>
            Vue响应式原理
            <!----></div></a> <span class="date">03-14</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/83cc7a/"><div>
            Vue虚拟DOM-cnblog
            <!----></div></a> <span class="date">03-14</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="3010733382@qq.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/linxin1123" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2022-2023
    <span>lingxin | <a href="https://github.com/linxin1123/vuepress-blog/blob/master/LICENSE" target="_blank">MIT License</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.57550e13.js" defer></script><script src="/assets/js/2.f014c35f.js" defer></script><script src="/assets/js/140.a7c013ae.js" defer></script>
  </body>
</html>
